Hello everyone make sure to stop by and introduce yourself and do check out our design and programming sections.
Visit the Den and get some free stuff!

You are not connected. Please login or register

 » Graphic Design » Web Design » CSS » 

CSS3 Panoramic background using Animation and Keyframes

View previous topic View next topic Go down  Message [Page 1 of 1]

Bricyn

Bricyn

Forum Programmer
Forum Programmer
Element to have the panoramic background. In this case a full page wrapper. (Using it this way is very resource intensive.)
Code:
#wrapper {
    position:absolute;
    top:0px;
    height:100vh;
    width:100vw;
    overflow:hidden;
    background-image:url('images/panorama.png');
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position:0px 0px;
    // Name of the key-frames used and the number of iterations.
    animation: panorama infinite;
    -webkit-animation: panorama infinite;
    
    // Duration of the animation, used to control the speed.
    animation-duration: 296.999s;
    -webkit-animation-duration: 296.999s;

    // Ensures the animation is seamless. (If the image is seamless that is.)
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}

Keyframes to make the background scroll:
Code:
@keyframes panorama {
    from {background-position: 0}
    to {background-position: -8192px}
}
@-webkit-keyframes panorama {
    from {background-position: 0}
    to {background-position: -8192px}
}



Last edited by Bricyn on Thu Feb 19, 2015 12:37 am; edited 1 time in total

http://abelnet.net

george

george

Admin
Admin
Great example of how to use CSS animations Briycn. I made a JSFiddle to show the result as well.

Result of code above: https://jsfiddle.net/rbb57t2w/embedded/result/

Have you experimented with Jquery animations as well?

http://gareygraphics.com

Bricyn

Bricyn

Forum Programmer
Forum Programmer
Yeah, though I prefer doing most of my animations with css (Except for some of the simpler ones for removing or showing elements.)

I'm not certain why but JSFiddle is removing the working CSS on the full screen version, I re-made it while I was testing it so here's a link to an example with the code that's working.

https://jsfiddle.net/9v8jum5b/2/

http://abelnet.net

george

george

Admin
Admin
CSS is more efficient with animations. A lot of people underestimate the power of CSS :p

Jsfiddle is a fun way to display examples of the resulting code. I was thinking of working with an api to try and do something with it.

http://gareygraphics.com

Bricyn

Bricyn

Forum Programmer
Forum Programmer
They do, I'm fairly confident CSS3 is going to redefine how webpages are made. Even now parallax and panorama sites are becoming more and more common. Less is done with images with each passing day, and the web is becoming more efficient.

It probably wouldn't be too difficult to enable embedding I-frames of full screen jsfiddles into a post, if you have that much control over the forum software anyway.

http://abelnet.net

TheDeveloper

TheDeveloper

Moderator
Moderator
My only problem is that sites that do this are straining peoples eyes. A case for this would be for a canvas game maybe and then you would not use CSS3 Animations and just use javascript to determine the location of the sprite versus the screen. That's just me though.

george

george

Admin
Admin
Wouldn't it be more convenient to use CSS though? Also I do think that it does strain the eyes because if there is content on the page users eyes will want to see the content but the animation will keep attracting the eye away from what it wants to look at. In some cases it may be used for something else in which it makes the site look better but it would need to be more subtle so it doesn't distract the eye from the main content.

I usually follow guides like these when building a website in order to determine where to put everything.

CSS3 Panoramic background using Animation and Keyframes Priori10

That is a heat map that shows where the eye lands first. If the animation is in the background and is disrating it will throw your users eyes all over.

But the animation itself it is cool.

http://gareygraphics.com

TheDeveloper

TheDeveloper

Moderator
Moderator
Yes when designing you should follow the F heat map. You can look it up to understand it some more but always follow the F. In a gaming platform with canvas @george you should use JavaScript for detection since CSS isn't that powerful. Its great for other cases but in canvas we don't have selectors like we do in html altogether. Its the same common principal as a video game per se but VSS is not the way for detection at all. Though the panaramic sensory shown above is nice I believe it could be done even better with JavaScript. I actually made an animation function for Parallax and using the mousemove listener it adds such a huge difference and a life like no other. Though I do like this snippet shown that was just my preliminary thoughts.

george

george

Admin
Admin
Hmm.. That's a neat idea actually and Javascript animations you would have more control over but it all depends on what you want to make in the end I guess. If you wanted to do the mouseover effect or add different listeners Javascript is what you need since with CSS animations it lacks certain functionality. If you want something simple I think it would be better to use CSS again depending on what you need will decide the type of language you use.

http://gareygraphics.com

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Share this topic!

URL Direct
BBcode
HTML
CSS3 Panoramic background using Animation and Keyframes

Permissions in this forum:
You cannot reply to topics in this forum