2014 August 15 Archive - EXEIdeas – Let's Your Mind Rock

Like in the new era of designing every designer is adding some animation to there website. There are many ways to add animation like GIF image, SWF flash files, Movie Clips but all of these are too heavy that will effect on your SEO that is bad. But still animation catches every eyes so its also important too.Now as we shared a JavaScript code that is doing the same in last post but many thinks that JavaScript will make there site heavy but it will not as it is only 4-5 lines codes however it will not work without JavaScript browsers or JavaScript blocker extension browsers. Now if you want to work everywhere then you have to come in new era and have to use CSS3 Now if you will talk about CSS3 animation then your visitor must use CSS3 that near every new browser is supporting so now proceed with CSS3 codes that will help you to animate your DIV background and that will look amazing.CLICK HERE TO SEE DEMOFeatures:1.) Pure CSS3 Code.2.) No Extra HTML Codes.3.) Single DIV Required.4.) Cross Browser.5.) Fully Customizeable.6.) Scroll Background Image From Top To Bottom.7.) Short And Simple Code.8.) Easy To Add And Use.9.) 101% Smooth Scrolling.10.) Work On Any Platform.How To Do It?There are only three codes used in this snippet. HTML, CSS3 and 99.99% browsers and platform support it. So just add this code where you want to show it. But you have to keep something in your mind. CSS codes should be before your DIV code otherwise it will not work. #sliding_background {background-image:url('http://i.imgur.com/3QP1ROV.jpg');width:800px;height:300px;color:#FFFFFF;overflow:hidden;padding:10px;animation: mymove 5s linear infinite;-webkit-animation: mymove 5s linear infinite;-moz-animation: mymove 5s linear infinite;-o-animation: mymove 5s linear infinite;-ms-animation: mymove 5s linear infinite;}@keyframes mymove { 0% { background-position: 0 0; } 100% { background-position: 0 860px; }}@-webkit-keyframes mymove { 0% { background-position: 0 0; } 100% { background-position: 0 860px; }}@-moz-keyframes mymove { 0% { background-position: 0 0; } 100% { background-position: 0 860px; }}@-o-keyframes mymove { 0% { background-position: 0 0; } 100% { background-position: 0 860px; }}@-ms-keyframes mymove { 0% { background-position: 0 0; } 100% { background-position: 0 860px; }} Scrolling Background Of A DIV By CSS3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Customization:1.) Change http://i.imgur.com/3QP1ROV.jpg with your any size image link.2.) Change 860px with image height only.3.) Change 5s with your desired time for smooth animation.4.) No more editing required. Save and done.Last Words:This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share more codes that will make your coding more easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.