I am trying to rotate a 'back to top' button 360 degrees on hover WITHOUT un-rotating on mouseleave. I have tried multiple variations of jQuery code that I've found but I still can't seem to get it working. Here's the real example of where I've gotten so far (CSS hover between images as well).
I have tried changing the jQuery to mouseenter, mouseover, hover as well as including and omitting the ; after the rotate number, to no avail. Is it a simple jQuery syntax mistake that I'm making?
HTML:
<div class="scrollup">
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle"/>
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle"/>
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow"/>
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png" class="scrollImg2 scrollup-textarrow"/>
</div>
CSS:
.scrollup {
width: 45px;
height: 45px;
display: block;
margin-left: auto;
position: relative;
cursor: pointer;
}
.scrollup img {
position: absolute;
}
.scrollImg2 {
opacity: 0;
}
.scrollup:hover > .scrollImg1 {
opacity: 0;
}
.scrollup:hover > .scrollImg2 {
opacity: 1;
}
JQuery:
$(".scrollup").mouseover(function() {
$(".scrollup-circle").rotate(360);
});
you can do it using jQuery like below
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.main{
width: 100px;
height: 100px;
}
div.main img{
width: 100%;
height: 100%;
}
.change{
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: 5s;
}
</style>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
<script type="text/javascript">
$("div.main").mouseenter(function(){
$(this).addClass("change").delay(5000).queue(function(){
$(this).removeClass("change").dequeue();
});
});
</script>
</body>
</html>
NOTE:(AFTER) ---> I didn't get what you ask really in your last comment. but try this for your comment question :) .hope it will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
div.main{
width: 100px;
height: 100px;
}
div.main img{
width: 100%;
height: 100%;
}
.change{
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
transition-duration: 5s;
}
.myopacity{
opacity: 0.6;
}
</style>
<body>
<div class="main">
<img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg">
</div>
<p id="dis"></p>
<script type="text/javascript">
var thevalue = 1;
$("div.main").mouseenter(function(){
thevalue = thevalue+1;
if(thevalue%2==0)
{
$(this).addClass("myopacity");
}
else
{
$(this).removeClass("myopacity");
}
$(this).addClass("change").delay(5000).queue(function(){
$(this).removeClass("change").dequeue();
});
});
</script>
</body>
</html>
You can use css transform with rotate animation
.scrollup {
width: 45px;
height: 45px;
display: block;
margin-left: auto;
position: relative;
cursor: pointer;
}
.scrollup img {
position: absolute;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.scrollImg2 {
opacity: 0;
}
.scrollup:hover{
}
.scrollup:hover > img {
opacity: 0;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.scrollup:hover > .scrollImg2 {
opacity: 1;
}
You can use css animation, .hover(), animationend event. Set animation-name of element to name of #keyframes at .hover() event handler, set animation-name of element to empty string at animationend event
$(".scrollup")
.hover(function() {
$(this).css({"animationName":"rotate",
"mozkitAnimationName":"rotate",
"webkitAnimationName":"rotate"});
})
.on("animationend.rotate", function() {
$(this).css({"animationName":"",
"mozkitAnimationName":"",
"webkitAnimationName":""});
});
.scrollup {
width: 45px;
height: 45px;
display: block;
margin-left: 50%;
position: relative;
cursor: pointer;
animation-duration: 2s;
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
}
.scrollup img {
position: absolute;
}
.scrollImg2 {
opacity: 0;
}
.scrollup:hover > .scrollImg1 {
opacity: 0;
}
.scrollup:hover > .scrollImg2 {
opacity: 1;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollup">
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099d215d5dbdafb6373aa/1474337234028/top-circleonly.png" class="scrollImg1 scrollup-circle" />
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a11f5e2318fad09f16f/1474337297146/top-hover-circleonly.png" class="scrollImg2 scrollup-circle" />
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e099f3f5e2318fad09f010/1474337267982/top-textarrowonly.png" class="scrollImg1 scrollup-textarrow" />
<img src="https://static1.squarespace.com/static/56b92ff8e707ebc576b99166/t/57e09a17f5e2318fad09f1a5/1474337303397/top-hover-textarrowonly.png" class="scrollImg2 scrollup-textarrow" />
</div>
Related
I want to create a time down counter. I already created a counter but it is not working properly and how to reset animation of CSS after one interval.
There is the link of the jsfiddle: [https://jsfiddle.net/waleedGRT/x4rcj068/10/](https://jsfiddle.net/waleedGRT/x4rcj068/10/)
Thanks You in advance.
Not sure what exact functionality you're looking for, but this should get you past your problem. EDIT updated code as per OP response.
function counterA(valuea) {
var tempA = valuea;
setInterval(function() {
if (tempA < 1) {
window.history.go(0);
}
$('#time').text(tempA);
tempA--;
}, 1000);
}
$(document).ready(function() {
counterA(11);
});
.wrapper {
margin: 50px;
width: 300px;
height: 300px;
overflow: hidden;
position: relative
}
.right {
border: #3f85a3 solid 15px;
height: 180px;
width: 180px;
border-radius: 120px;
border-top-color: transparent;
border-left-color: transparent;
position: absolute;
transform: rotate(-45deg);
animation: rota2 12000ms linear;
-moz-animation: rota2 12000ms linear;
-o-animation: rota2 12000ms linear;
-webkit-animation: rota2 12000ms linear;
}
#keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
#-o-keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
#-moz-keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
#-webkit-keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
.left {
border: #3f85a3 solid 15px;
height: 180px;
width: 180px;
border-radius: 120px;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
transform: rotate(315deg);
animation: rota 24000ms linear;
-o-animation: rota 24000ms linear;
-moz-animation: rota 24000ms linear;
-webkit-animation: rota 24000ms linear;
}
#keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
#-o-keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
#moz-keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
#-webkit-keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
.middle {
color: #0987bc;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 180px;
height: 180px;
left: 15px;
top: 15px;
border-radius: 150px;
position: relative;
z-index: 4;
}
.popover {
background: white;
width: 80px;
height: 162px;
position: absolute;
top: -3px;
left: -3px;
opacity: 0;
z-index: 2;
animation: popover 0ms linear;
}
#keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#time {
font-size: 30px;
}
#timer {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Round E&D</title>
</head>
<body>
<div>
<div class="wrapper">
<div class="right"></div>
<div class="left"></div>
<div class="middle">
<p id="counter"><br />
<span id="counter">
<div>
<span id="timer">
0:<span id="time">12</span>
</span>
</div>
</span>
</p>
</div>
<div class="popover"></div>
</div>
</div>
</body>
</html>
So I need to be able to check if a specified id has a specific class, but I'm not completely sure on how to do that.
Here is my code. You can see my attempt at checking a id for a specific class in the homeTransition function.
function homeTransition()
{
if(document.getElementById("aboutContent").hasClass("animated fadeInUp")){
document.getElementById("aboutContent").className = " animated slideOutDown";
} else if(document.getElementById("projectsContent").hasClass("animated fadeInUp")){
document.getElementById("projectsContent").className = " animated slideOutDown";
} else if(document.getElementById("contactContent").hasClass("animated fadeInUp")){
document.getElementById("contactContent").className = " animated slideOutDown";
}
document.getElementById("astronaut").className = " animated fadeIn";
}
function aboutTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("aboutContent").className = " animated fadeInUp";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function projectsTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("projectsContent").className = " animated fadeInUp";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function contactTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("contactContent").className = " animated fadeInUp";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
}
//Menu
function expand(){
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$(".button").on('click', expand);
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #2b2b41;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #42424b;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #353440;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(45, 51, 54, 0.9);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
h1 {
margin-top:60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding:0;
list-style:none;
font-size:14px;
}
li {
padding:10px 10px;
}
a {
text-decoration:none;
padding:10px 15px;
color:#fff;
font-family:"Roboto";
font-size: 1.5em;
font-weight: 300;
}
a:hover {
text-decoration: line-through;
color: #0dffec;
}
.content {
position:relative;
width:300px;
}
.button {
width:20px;
height:40px;
margin:24% 36%;
padding: 14px;
cursor:pointer;
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" onclick="homeTransition()"><li><i class="fa fa-home"></i> home</li></div>
<div id="about" onclick="aboutTransition()"><li><i class="fa fa-user"></i> about</li></div>
<div id="projects" onclick="projectsTransition()"><li><i class="fa fa-code"></i> projects</li></div>
<div id="contact" onclick="contactTransition()"><li><i class="fa fa-paper-plane"></i> contact</li></div>
</ul>
</div>
<div class="content">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent">
</div>
<div id="projectsContent">
</div>
<div id="contactContent">
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
You can check like this
document.getElementById("projectsContent").className.indexOf("animated") !== -1 // class exists on element
But for this you can check for only one class, if you want to check for multiple classes store the className in a variable and check for all of them or write a utility function.
EDIT:
As mentioned by #Jerinaw in comment you can also use the below code, which is much shorter than above if you don't need support for < ie10
document.getElementById("projectsContent").classList.contains("animated") // class exists on element
Use vanilla Javascript
document.querySelector('#aboutContent.myclass');
This reads: Select the element with the id (id selector #) aboutContent, and that has the class (class selector .) myClass.
Read up on
CSS selectors
querySelector
I'd also like to note that you seem to be mixing vanilla javascript and jQuery. Maybe you should read up on selecting elements with jQuery.
I have some Div Boxes how can i get them flipped on hover? I tried already some examples i found but i cant get it working? Can someone please help me?
.kachel_a_image_1 {
height:150px;
width:150px;
margin:auto auto;
margin-top:15px;
background:red;
}
.kachel_wrapper {
margin: auto auto;
width: 90%;
min-height: 450px;
margin-top: 55px;
text-align: center;
padding:10px;
padding-top:30px;
padding-bottom:20px;
}
.kachel_text {
font-size:10px;
color:white;
line-height:15px;
text-align:center;
}
.kachel {
height: 180px;
width: 180px;
margin-top: 20px;
margin-left: 58px;
background: #6e7176;
display: inline-block;
margin-bottom:30px;
}
<div class="kachel"><div class="kachel_a_image_1"></div><div class="kachel_text">Social</div></div>
I only want to use Css and no JS if its possible. Can someone explain me how this works or giving me a really simple example :S ?
Use transform:
.kachel:hover{
transform: rotateX(150deg);
}
more Information: http://www.w3schools.com/css/css3_3dtransforms.asp
Also if you want to add a duration to the animation use transition-duration
.kachel{
transition-duration: 5s;
}
for changing the content after the hover use the pseudo element :after and the attribute content.
For example:
.kachel:hover:after{
content: 'hovering';
}
You may have to change it a bit, i haven't tested it.
Using transition and backface-visibility.
Probably the best soultion is to use simple transform and backface-visibility. jsfiddle
.front, .back{
width: 100px;
height: 100px;
}
.front{
background-color: blue;
}
.back{
background-color: red;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100px;
height: 100px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
Using #-webkit-keyframe
Another approach is to use animation and #-webkit-keyframes. However this will run the animation one time initially. (jsfiddle)
.box, .wrapper {
width: 100px;
height: 100px;
position: absolute;
}
.back {
transform: rotateY(90deg);
background-color: red;
-webkit-animation: in 0.2s forwards;
animation in 1s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
.front {
transform: rotateY(90deg);
background-color: blue;
-webkit-animation: out 0.2s forwards;
animation out 0.2s forwards;
background-image: url("https://yt3.ggpht.com/-Bvvd30cZJe4/AAAAAAAAAAI/AAAAAAAAAAA/CxN5F1_QEU8/s100-c-k-no/photo.jpg");
background-size: cover;
}
.wrapper:hover .box.back {
-webkit-animation: out 0.2s forwards;
animation: out 0.2s forwards;
}
.wrapper:hover .box.front {
-webkit-animation: in 0.2s forwards;
animation: in 0.2s forwards;
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay: 0.2s;
}
#-webkit-keyframes in {
from {
-webkit-transform: rotateY(90deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-webkit-keyframes out {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(90deg);
}
}
<div class="wrapper">
<div class="box back"></div>
<div class="box front"></div>
</div>
For this I would use backface-visibility in conjunction with transform
<div class="container">
<div class="box front">image</div>
<div class="box back">Social</div>
</div>
CSS:
.container {
width: 180px;
height: 180px;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.box {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
background: red;
z-index: 2;
}
.back {
z-index: 1;
background-color: green;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
color:white;
}
.container:hover {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Here's a JS fiddle
EDIT: The above fiddle has been edited to have an outer wrapper which initiates the flip. This ensures that the animation doesn't jitter.
.wrapper {
width: 180px;
}
.wrapper:hover .container {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
I have the following page (see image)
When I click the red button, I want a div to animate when it shows to the user. However, I want the animation to come from the button. Right now the animation comes from the center of the page.
Here's the code I have
#keyframes fadeInScale {
0%{
opacity:0;
transform: scale(0.5);
}
100%{
opacity:1;
transform: scale(1);
}
}
#keyframes fadeOutScale {
0%{
opacity:1;
transform: scale(1);
}
100%{
opacity:0;
transform: scale(0.5);
}
}
.overlay {
position: absolute;
top: 0;
z-index: 500;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: block;
animation: fadeOutScale 0.3s 1 ease-out;
}
When I click on the red circle, the user sees an overlay page (which is actually a div with class overlay that is absolutely positioned). I add fade-scale-in class to the div (with class overlay). The div then transitions from the center of the screen and grows to fit the user's screen. I want it so that the div transitions from the red circle. Can I use transforms to make this happen?
Here's the code. As you notice, when you click on the yellow circle, the div animates from the center and not from the yellow circle:
https://jsfiddle.net/e4g71y4m/3/
You can do this by adding transform-origin: top left; to the .overlay element. (Don't forget the prefixes (-webkit, -moz etc.)
var overlay$ = $('.overlay');
overlay$.bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) {
console.debug('test');
if (e.animationName !== undefined && e.animationName == "fadeOutScale") {
overlay$.addClass('hide');
} else if (e.originalEvent.animationName !== undefined && e.originalEvent.animationName == "fadeOutScale") {
overlay$.addClass('hide');
}
});
$('.click').on('click', function() {
overlay$.removeClass('hide').addClass('fade-scale-in');
});
$('.click-again').on('click', function() {
overlay$.removeClass('hide').addClass('fade-scale-out');
});
#keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes fadeOutScale {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.5);
}
}
.hide {
display: none;
}
.overlay {
position: absolute;
top: 0;
z-index: 500;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
background: red;
transform-origin: top left;
}
.click {
background: yellow;
border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
cursor: pointer;
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: block;
animation: fadeOutScale 0.3s 1 ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">Click me</div>
<div class="overlay hide">
Test
<div class="click-again">Click me again</div>
</div>
I've been making a website that uses parallax very similar to how it's used in http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/, and I've been trying to implement some jquery which will make the page automatically scroll to the bottom on page load. However, the command I am using does not move the scroll bar at all. I've tried this on static websites and it seems to work fine.
$(document).ready(function() {
$("html, body").animate({
scrollTop: $(document).height()
}, 2000);
return false;
});
My code (stripped of text) is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.email a {
color: #001F67;
text-decoration: none;
}
a {
text-decoration: none;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: Black;
font-size: 6vmin;
}
.About {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #001F67;
text-decoration: none;
font-size: 4vmin;
background-color: white;
}
.parallax {
height: 500px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
position: relative;
height: 500px;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-550px) scale(3);
z-index: 3;
}
.parallax__group {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
body, html {
overflow: hidden;
}
body {
font: 100% / 1.5 Arvo;
}
* {
margin:0;
padding:0;
}
.parallax {
font-size: 200%;
}
#group2 {
z-index: 3;
}
#group2 .parallax__layer--back {
background: #FFFFFF;
}
#group3 {
z-index: 4;
}
#group3 .parallax__layer--base {
/*background: black;*/
}
</style>
<script>
$(document).ready(function() {
$("html, body").animate({
scrollTop: $(document).height()
}, 2000);
return false;
});
</script>
</head>
<body>
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
</div>
<div class="parallax__layer parallax__layer--back">
<div class="title"><strong>Example Text</strong></div>
</div>
</div>
<div id="group3" class="parallax__group">
<div class="parallax__layer parallax__layer--fore">
<div class="About">
<!-- design inspired by graham hicks -->
<p>
Example Text
<p>
Example Text
</p>
<p class = "email">
<br /> Example Text
</p>
</div>
</div>
<div class="parallax__layer parallax__layer--base">
</div>
</div>
</div>
</body>
</html>
Does anyone have any idea as to why this isn't working?
Change $("html, body") to $(".parallax") to get it working.
$(document).ready(function() {
$(".parallax").animate({
scrollTop: $(document).height()
}, 2000);
return false;
});
JSFiddle: https://jsfiddle.net/qs0vbbtx/