Graphic Designer Vs Web Designer

Results for Scrolling

Scrolling Image Effects

Kamal Thakur Saturday, September 19, 2020

Inform your users: This site has a preloader that pauses content from displaying until the images have loaded. This is great, but unfortunately, there is no feedback to tell the user what is happening, so it’s possible to think the site is broken as nothing appears for the first few seconds. A simple message to inform the user can make all the difference.

Emersing the user into the story: “This site is all about telling the YMCA’s story. One of their strengths is strong, emotional photography. We dug into their library to present fullscreen images that give the site immediate impact. The visuals were an opportunity to help set the mood and really draw the user in to each section of the story.” - Dan Bartley, Senior Designer

• Inspiration: www.imagineourymca.ca

One of the greatest weapons in the arsenal of a web designer is the image, and we’ve come a long way since the days of placing the smallest possible picture on a screen. Now designers are using the image to lead the user experience and coupled with the rich typography that CSS3 offers, we are witnessing the boundaries of HTML5 web sites pushed to greater success. This is evident in the Imagine our YMCA site created by Domain7. This skillfully crafted site uses jQuery to fade between background images as the site scrolls and the content on-screen changes. This produces a well-designed site that really adds to the user experience of the site.

Emersing the user into the story: “This site is all about telling the YMCA’s story. One of their strengths is strong, emotional photography. We dug into their library to present fullscreen images that give the site immediate impact. The visuals were an opportunity to help set the mood and really draw the user into each section of the story.”

#1 - INSPIRATION: An Enhanced Annual Report

Imagine our YMCA is actually the annual report, and it cost the same as designing, printing, and distributing a traditional annual report but has a far greater reach and shareability. Using a narrative-based approach, the team at Domain7 adapted the traditional paper-and-coil annual report format for desktop and mobile web viewing. This allowed the design to focus on key messaging within the site, a one-page display, photo evidence including galleries and moving image, mobile design, and a paperless approach.

#2 - TECHNIQUE: Transitioning With Scroll

STEP 1: Create A New Page

In Dreamweaver create a new HTML5 webpage and add the code to the head section. This links us to jQuery and creates the body style and the style for fixing the image container on the page.

CODE:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
body{
margin: 0; height: 1800px;
min-height: 1800px; padding: 0;
}
imageSwap{
position: fixed; overflow:hidden;
top: 0px; left: 0px; width:100%;
}
#imageSwap.fixed {position: fixed;top:0 px;}

STEP 2: Style The Content

Here we position the images and fix the content in a div over the top of them in a semi-transparent box. This content is positioned on the page so that we have to scroll down to see the next section.

CODE:

.one {position:absolute; z-index:1;}.two {position:absolute; display:none;z-index:2;}
.content {
background-color:rgba(125,0,0,0.6);
padding: 10px; height: 850px; width:800px;
margin-right: auto; margin-left:auto;
position: relative; z-index:100;
}
#first{top:50px;}
#second{top:350px;}
</style>

STEP 3: Add The HTML

In the body section of the document add the following code. Here we add the div container imageSwap which holds the images we will use in the background. We then have two content areas that are positioned above this. Finally, we move into JavaScript and set up two variables to hold the page position.

CODE:

<div id="imageSwap"><img class="one" src="image01.jpg" /><img class="two" src="image02.jpg" />
</div>
<div id="first" class="content">Content Area 1</div>
<div id="second" class="content">Content Area 2</div>
<script language="javascript" type="text/javascript">
var thisPos=1;
var lastPos=1;

STEP 4: Using jQuery

The document ready function fixes the background div and detects scrolling. If the user scrolls past 900 pixels then they are at the second div container, so we fade in the second image while fading out the first image.

CODE:

$(document).ready(function () {
$('#imageSwap').addClass('fixed');
$(window).scroll(function() {
var yPos = $(window).scrollTop();
if (yPos > 900){
thisPos=2;
if(thisPos != lastPos){
$('.one').fadeOut(500);
$('.two').fadeIn(500);
}
}

STEP 5: Detecting First Content

Now the final code reverses the last bit. Save this document now and, assuming you have two images named image01.jpg and image02.jpg, you should have a page that changes the background depending on scrolling.

CODE:

if (yPos <= 900){
thisPos=1
if(thisPos != lastPos){
$('.two').fadeOut(500);
$('.one').fadeIn(500);
}
}
lastPos=thisPos;
});
});</script>
item"></a>

#3 - TECHNIQUE: Create The Content Background

The content background has an image with a rip down each side. This image is a semi-transparent PNG and is straightforward to create. We’re going to show the creation process using Photoshop to put the composition together.

STEP 1: Create The Gradient

Create a new document 800 pixels wide by 100 high in Photoshop with a transparent background. Choose light red and dark red as the foreground and background colours. Use the gradient tool to create a gradient across the screen.

STEP 1: Create The Gradient

STEP 2: Fade Image

Make the Opacity of the layer 50%, and then we need to search online for a rip or tear image. When you find one that’s black and white or transparent already, download it and open in Photoshop.

STEP 2: Fade Image

STEP 3: Add The Rip

Select the rip using a colour selection and drag it into the gradient document. Position it at the edge and with the rip selected, choose the gradient layer and hit delete. If you turn off the rip layer you will have a ripped edge. Repeat this for the opposite side.

STEP 3: Add The Rip

Scrolling Image Effects

Reviewed by Kamal Thakur on Saturday, September 19, 2020 Rating: 5

Scrolling Backgrounds With An Animated Twist

Kamal Thakur Friday, September 18, 2020

Tone It Down: Reducing the colour in the background achieves two things. Firstly it cuts down on data so an image can be compressed further. Secondly, it allows the main content to be read much more clearly over the top without the backdrop muscling in on the foreground.

“The moving image in the background of the Diva website works so successfully because the user isn’t accustomed to the background changing too much. In order to improve user experience think about how visitors interact with your site and what might be altered to give your users a more memorable experience – this is certain to drive traffic.”

Inspiration: www.divabymakole.at

There are so many examples of websites out there that have a good design, but not always a boundary-pushing user experience.

Occasionally, though, you will come across a website that offers a real wow factor as you explore it, providing some form of graphical awesomeness out of the blue.

When good design and interactivity are brought together you get a very memorable site. The Diva website has an incredibly simple design on first impressions. There’s a model in the background and the content is deliberately placed towards the bottom of the screen inviting you to scroll. As the user moves down the page, however, the background image comes alive as a sequence of images reveals the model getting dressed, with the content sliding over the top. All in all, it makes for a fun and unexpected experience.

#1 - INSPIRATION: Simplicity Is Key

So often a website will try and cram far too much detail in, with sidebars and content all over the place. The Diva website keeps its content relatively simple, in a single column for the majority of the page. This enhances the background image content and makes it easy to scale for smaller devices. The design has suitably been thought through when moving to tablet-style displays, as the menu moves from the side to the top. Again, when moving to a smaller phone-sized display, the background image becomes fixed saving the browser the extra workload of dealing with those images.

#2 - TECHNIQUE: Scroll-Driven Animated Images

STEP 1: Start The Document

Open a new HTML document and add the code below into the head section. This links up to the jQuery library and establishes the main structure of the page.

CODE:

body{

margin: 0;

height: 1800px;

min-height: 1800px;

padding: 0;

STEP 2: Complete The CSS

In the head continue adding the CSS as shown. This styles the image swap div area and allows it to fill the full screen. We create a fixed class that we add with jQuery then we add a class for each image. Continue adding classes for 3 and 4; these will be the same as 2 but with a higher z-index, positioning images correctly.

CODE:

imageSwap{

position: fixed;

overflow:hidden;

top: 0px;

left: 0px; width:100%;

}

#imageSwap.fixed {

position: fixed;

top:0 px;

}

.1 {

position:absolute;

z-index:1;

}

.2 {

position:absolute;

display:none;

z-index:2;

}

</style>

STEP 3: Add The Body Content

Move to the body section now. The following code adds a div tag to the document that contains a series of images. The CSS turns the visibility of all the images of except for the topmost (image 1). Using jQuery we will activate the appropriate image as the user scrolls.

CODE:

STEP 4: Add the jQuery

Now, underneath the div tag in the body section, add the following code which defines a JavaScript area and records the position of the scrolling. As the user moves down the document the scroll position is saved in the yPos variable. This then changes the position variable for every 300 pixels that are scrolled.

CODE:

var thisPos=1;

var lastPos=1;

$(document).ready(function () {

$('#imageSwap').addClass('fixed');

$(window).scroll(function() {

var yPos = $(window).scrollTop();

if (yPos <= 300){

thisPos=1

}

if (yPos > 300 && yPos < 599){

thisPos=2;

}

STEP 5: Switch The Images

To give the illusion the background is moving, the images in the div tag are switched between. This is done by fading in the new position class and fading out the old position. The last position variable is updated after every scroll so we know where the user is in the document.

CODE:

if (yPos > 600 && yPos < 899){thisPos=3;

}

if (yPos > 900 ){

thisPos=4;

}

if(thisPos != lastPos){

$('.'+thisPos).fadeIn(10);

$('.'+lastPos).fadeOut(10);

}

lastPos=thisPos;

});

#3 - TECHNIQUE: Create Your Own Image Sequence

In order to create an image sequence background like Diva, you will need to set up a DSLR and capture your subject. Ideally, you would do this in a studio, but a well-lit room with a decent flash can work just as well.

STEP 1: Set Up The Shot

You need a steady shot so grab a camera and you will definitely need a tripod. If you haven’t got a floor-mounted tripod then a GoPro or mini tripod will suffice. Use a plain white sheet for the background.

STEP 1: Set Up The Shot

STEP 2: Import into Photoshop

Once you have captured your subject bring the first image into Photoshop and add a new layer. Use a Radial gradient with the foreground set to white and the background set to black, then drag from the centre out to apply a vignette. Lastly, change this layer’s blend mode to Multiply.

STEP 2: Import into Photoshop

STEP 3: Colour Tweaks

Press Cmd/Ctrl+U to call up the Hue/Saturation panel and drag the Saturation slider down to take some colour out of the image. Save the file and drag in the other shots, using this as a template.