Madeline D.

Join me in my exploration entries and learn some cool code to use in your own HTML Files!

Exploration Entry 1: Site Logo/Watermark Script

The code that I discovered allows you to display a static image, one that never leaves sight, at any corner of the webpage. If you don't want it permanently there, you can have it disappear after "x" seconds. This would be useful for branding purposes, or to have an easy way to jump back to the site's homepage.

First, add the code below to the <head> section of the page you would like your watermark/logo to appear on:

/***********************************************

* Site Logo script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Please keep this notice intact

* Visit Project Page at http://www.dynamicdrive.com for full source code

***********************************************/

</script>

The code above is linking the <head> section to to the external .js file "staticlogo.js", which would need to be downloaded. The code in this file contains the information the browser needs to show the logo and keep it fixed.

Inside the .js file, a few configurations should be made to the following:

setting: {orientation:4, visibleduration:20000, fadeduration:[1000, 500]}, //orientation=1|2|3|4, duration=millisec, fadedurations=millisecs

offsets: {x:10, y:10}, //offset of logo relative to window corner

logoHTML: '<a href="http://www.dynamicdrive.com" title="Dynamic Drive"><img src="logo.gif" style="width:50px; height:47px; border:0" /></a>',

The option setting-orientation sets the logo relative to the window edge which means it should be an integer of 1-4. 1=top left corner, 2=top right corner, 3=bottom left corner, and 4=bottom right corner.

To change the amount of time the logo stays up, setting.visibleduration can be changed, which sets the duration (in milliseconds) before the logo disappears. Enter 0 if you would like it to stay up perpetually.

Source: http://www.dynamicdrive.com/dynamicindex4/logo.htm.

Hope you enjoyed this entry from March 1, 2021!

Madeline

Visual Image

I'm pretending that this is Ikea's website, and the logo in the top left corner stays there as you scroll.

Code

I tried the Logo Code in Dreamweaver, and it worked well! I connected the external file and was able to set it all up.

Exploration Entry 2: CSS Animation-Flying Birds

When I was looking for something to recreate, I wanted the code to be something creative and out of the box. On the site https://www.creativebloq.com/inspiration/css-animation-examples, there were some cool CSS animations that stuck out. My favorite one was the flying birds- I could watch them forever and I feel like it's a nice addition to a home page! Follow along with me and learn how to add them in these five steps.

First: To set up the HTML, simply create a container wrapping in each bird so that we can apply multiple animations. The goal is to make the bird fly and move it across the screen.

</div>

Second: Go to the CSS file and apply the birds' SVG(scalable vector graphics) for the background, choosing the size of the bird div. The width calculates this background position and should be altered until it looks correct.

.bird

{

background-image: url('bird.svg');

background-size: auto 100%; width: 88px;

height: 125px;

will-change: background-position;

}

@keyframes fly-cycle

{

100%

background-position: -900px 0;

}

Third: Create the birds' fly cycle using some CSS animation tricks. The "animation-timing-function" can be used to show the image in steps, like flicking through pages in a notebook.

animation-name: fly-cycle;

animation-timing-function: steps(10);

animation-iteration-count: infinite;

animation-duration: 1s;

animation-delay: -0.5s;

Fourth: Now that the bird is flapping its wings, we need to move it across the screen by applying another keyframe animation. This will move the bird horizontally while also moving it vertically. Altering the scale will help her move across the screen realistically.

.bird--one

{

animation-duration: 1s;

animation-delay: -0.5s;

}

.bird--two

{

animation-duration: 0.9s;

animation-delay: -0.75s;

}

Fifth: Here, we've created two birds, but many copies can be made depending on how many you want. Apply different animation times and delays to see how they move around differently.

Thanks for reading my March 11 entry!

Madeline

Code

This is from CodePen, but I also tried the code out in Dreamweaver! The author of the "Flying Birds" code is Steven Roberts.

Visual Image

The image above is of one bird instead of the whole flock. It looks still now, but it's moving on the web page!

Exploration Entry 3: Image Carousel

For my next Exploration Entry, I chose to create an image carousel using html code. I like how they give you the option to insert a slideshow in Google Sites, but I wanted to know the code behind this. An image carousel comes in handy when you want viewers to interact with your site because it makes them curious of what the other pictures are instead of giving it to them all at once.

First: Carousels use a div id(id="myCarousel") in order for the controls to function properly. The class="carousel" specifies that this div contains a carousel. The .slide class allows for CSS transition and animation effects. To make the code animate right as the page loads, insert the data-ride="carousel" attribute.

Second: Indicators are the little dots at the bottom of the slide show which reveals how many images there are, and which slide the viewer is viewing. They are specified in an ordered list called .carousel-indicators. The id of the carousel is pointed to through the data-target attribute, and the data-slide-to attribute specifies which slide to go to when clicking on the specific dot.

</ol>

Third: The div class .carousel-inner specifies the slides. The next div with the class of .item is the content of each slide which can be filled with text or images. For the carousel to be seen, the .active class needs to be added to one of the slides, whichever one you want first.

</div>

</div>

</div>

Fourth: This last piece of code adds the "left" and "right" buttons which allows viewers to switch between slides using arrows. The data.slide attribute listens to "prev" or "next" which changes the slide position relative to the image it is on.

<span class="sr-only">Previous</span>

</a>

</a>

</div>

I enjoyed doing this entry because it taught me the behind the scenes to something I find very useful on a website. Image carousels can be seen on the homepages of many sites, and they display images that make viewers want to keep going. All the information came from w3schools.com, a very useful resource that educated me well.

Thanks for joining me on this entry from April 11, 2021!

Madeline

Visual Image #1

The image above is an example of an image carousel from https://www.w3schools.com/bootstrap/bootstrap_carousel.asp.

Visual Image #2

This is the first image that is displayed, which means it used the .active class.

Page updated

Report abuse