Adding cool CSS 3 effects in different elements
To make a website more interactive, you may use the power of CSS to display different elements on a web page with animations like rotate or other effects.
For example, if you have an e-commerce website, then a section of products can be displayed with a fading effect as a user scrolls down to that section and uses a rotate effect as scrolling to special offers etc.
In this article, I am going to share a light-weight jQuery plug-in that uses CSS 3 effects for creating such animation in web page elements. Have a look at the following section for live demos and setting up guide with code for using this cool plug-in.
A demo of adding rotate effect as you scroll down
In this demo, the rotate effect is added as you scroll down the page. In the markup section, the Bootstrap CSS is used for the demo. You may use it with non-Bootstrap-based projects as well.
In the demo page, scroll down to bring the block of elements in view and those will display with a rotating effect:
See online demo and code
The markup for creating the rotating animation using CSS3 and jQuery:
<div class="container"> <h3>Scroll down</h3> </div> <div class="container"> <h2>A demo of rotating elements</h2> <div class="row"> <div class="col-md-4"><div class="content-box" data-move-x="-500px" data-rotate="90deg"></div></div> <div class="col-md-4"><div class="content-box" data-move-y="200px" data-move-x="-200px" data-rotate="45deg"></div></div> <div class="col-md-4"><div class="content-box" data-move-x="500px" data-rotate="-90deg"></div></div> </div> </div>
You only need a line of jQuery after including the library and plug-in JS files. In the markup section, use the data-move-y and data-move-x data attributes for specifying the angle.
Get the complete code from the demo page.
A demo with fading effect
In this demo, the content boxes are displayed with the fading effect as you scroll down to that area.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
html, body, .banner, .container {
height:100%;
text-align: center;
}
.content-box {
height:250px;
background: #408080;
}
</style>
</head>
<body>
<div class="container">
<h3>Scroll down</h3>
</div>
<div class="container">
<h2>A demo of fading elements</h2>
<div class="row">
<div class="col-md-6"><div class="content-box"></div></div>
<div class="col-md-6"><div class="content-box"></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/smoove/jquery.smoove.js"></script>
<script>$('.content-box').smoove({offset:'50%'});</script>
</body>
</html>
You may find the complete code of this demo in the demo page’s code section.
The demo of moving elements across the screen
In this demo, the block of “content” that actually can be product listings, service box or images are moved across the screen by using different values for data-move-y and data-move-x data attributes:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
html, body, .banner, .container {
height:100%;
text-align: center;
}
.content-box {
height:250px;
background: #804040;
box-shadow: 10px 10px 15px #92A5DE;
}
</style>
</head>
<body>
<div class="container">
<h3>Scroll down</h3>
</div>
<div class="container">
<h2>A demo of moving objects across screen</h2>
<div class="row">
<div class="col-md-3"><div class="content-box" data-move-y="200px" data-move-x="-200px"></div></div>
<div class="col-md-3"><div class="content-box" data-move-y="200px" data-move-x="-100px"></div></div>
<div class="col-md-3"><div class="content-box" data-move-y="200px" data-move-x="100px"></div></div>
<div class="col-md-3"><div class="content-box" data-move-y="200px" data-move-x="200px"></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/smoove/jquery.smoove.js"></script>
<script>$('.content-box').smoove({offset:'50%'});</script>
</body>
</html>
A demo of 3D effect for displayed elements
You may also move the objects with 3D effects by using this plug-in. For this, the three data attributes are used with the following values in the demo:
data-rotate-x=”90deg”, data-move-z=”-500px” and data-move-y=”200px”
See online demo and code
The CSS used for this demo:
.content-box {
height:250px;
background: #0000A0;
box-shadow: 15px 20px 25px #A7A7A7;
}
The markup:
<div class="container"> <h3>Scroll down</h3> </div> <div class="container"> <h2>A demo of moving 3D effect</h2> <div class="row"> <div class="col-md-4"><div class="content-box" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div> <div class="col-md-4"><div class="content-box" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div> <div class="col-md-4"><div class="content-box" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div></div> </div> </div>
A demo of scaling and skewing elements
In this demo, the objects are scaled and skewed by using the data-scale and data-skew attributes. Along with this, the offset property in the jQuery code also plays its role. Have a look:
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
html, body, .banner, .container {
height:100%;
text-align: center;
}
.content-box {
height:250px;
background: #0000A0;
box-shadow: 15px 20px 25px #A7A7A7;
}
</style>
</head>
<body>
<div class="container">
<h3>Scroll down</h3>
</div>
<div class="container">
<h2>A demo of moving 3D effect</h2>
<div class="row">
<div class="col-md-6"><div class="content-box" data-scale="5" ></div></div>
<div class="col-md-6"><div class="content-box" data-scale="0.2" data-skew="90deg,90deg"></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/smoove/jquery.smoove.js"></script>
<script>$('.content-box').smoove({offset:'30%'});</script>
</body>
</html>
A demo of rotating images
In this demo, rather than using just a block of CSS, I have used images for rotation. Yet again, the images are used inside the Bootstrap classes. For implementing that, I simply used the img src tag of HTML inside the div where data attributes for rotating the elements are used:
See online demo and code
Get the complete code by clicking the above image or demo link.
Credit: abeMedia