Develop Reference

How to adjust section margin after transition

I have a div that transitions on the Y-axis by 100px. I am wanting my blue div #home-section3 to not have any top margin from .home-section2 after the transition, but ideally I do not want to have to set the margin-top to -100px for every div below the transition div. Is there a different way in which I can get the white-space gap to not appear after the transition finishes?
Here is a fiddle.
function section2Delays() {
$('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);
.home-section2 {
display: inline-block;
width: 50%;
height: 300px;
vertical-align: top;
margin-top: 100px;
opacity: 0;
transition: 1s;
-webkit-transition: 1s;
background: green;
}
.home-section2.fadeDisplay {
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
transition: 1s;
-webkit-transition: 1s;
opacity: 1;
}
#home-section3 {
width: 100%;
max-width: 100%;
height: auto;
background: #094765;
padding: 50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>

add margin-bottom:-100px in class .fadeDisplay
function section2Delays() {
$('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);
.home-section2 {
display: inline-block;
width: 50%;
height: 300px;
vertical-align: top;
margin-top: 100px;
opacity: 0;
transition: 1s;
-webkit-transition: 1s;
background: green;
}
.home-section2.fadeDisplay {
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
transition: 1s;
-webkit-transition: 1s;
opacity: 1;
margin:0 0 -100px 0 ;
}
#home-section3 {
width: 100%;
max-width: 100%;
height: auto;
background: #094765;
padding: 50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>

You can probably use margin-top instead of transform.
.fadeDisplay {
margin-top: 0;
}
jsFiddle
In fact, the whole animation can be done with CSS only.
.home-section2 {
margin-top: 100px;
opacity: 0;
animation: ani 2s forwards;
}
#keyframes ani {
to {
margin-top: 0;
opacity: 1;
}
}
jsFiddle

Why isn't this :after element working?

I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.
http://www.samnorris.net/portfolio-ss/
The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.
is my CSS incorrect, or something else...?
Here is the Codepen which shows the animation that should be displaying:
http://codepen.io/devilishalchemist/pen/emOVYQ
HTML:
<div id="windowloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Relevant CSS from my page:
/* ==========================================================================
PAGE LOADER
========================================================================== */
.nonscroll {
overflow: hidden;
}
#windowloader {
overflow: auto;
top:0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999998;
display: table;
background: $black;
}
#windowloader {
&:after {
content: '';
display: block;
position: absolute;
z-index: 999999;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
animation: loader 1.2s infinite ease-in-out;
span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #EE4040;
animation: loaderBlock 1.2s infinite ease-in-out both;
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(3) {
bottom: 0;
left: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
}
/*LOAD FINISH*/
.loaded {
top: -100%;
}
}
}
#keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
#keyframes loaderBlock {
0%, 30% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(90deg);
}
}
#keyframes loaderBlockInverse {
0%, 20% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(-90deg);
}
}
FWIW, I have also tried:
#windowloader:after { }
Javascript:
///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////
$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
$("body").removeClass('nonscroll');
$("#windowloader").remove();
$("#portfoliogrid").isotope('layout');
$("#isotopeMembers").isotope('layout');
$(".isotopeBlog").isotope('layout');
});

Bah, nevermind - I just put the animation in a separate div inside the #windowloader div which probably works well enough I guess..

javascript fade / zoom effect .. what am i doing wrong

I want the second layer background color to fade (opacity) and scale in the picture div2 .. trying to create something like http://fantasy.co/work
Here is the jsfiddle link
I could not post the whole code as I dont have enough points... Please follow the link and suggest what should do
The JQuery
$(document).ready(function() {
$(".background-color-container").css("opacity", 0.5);
$(".background-color-container").hover(function() {
$(this).animate({opacity: 1.0}, 500);
}, function() {
$(this).animate({opacity: 0.5}, 500);
});
});

use this logic in your solution Fiddler
div {
height: 200px;
width: 200px;
background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
background-size: 100% 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
background-position: center center;
}
div:hover {
background-size: 150% 150%;
}
<div></div>

You can use directly css transition :
just add the :
#imgDemo:hover .div3 img{
transform: scale(1.25);
}
#imgDemo:hover .div2 img{
opacity: 0.5;
}
.div3 img {
transition: transform 0.3s ease-in;
}
.div2 img {
transition: opacity 0.3s ease-in;
}
below your worknig example :
.div1 {
position: relative;
width: 600px;
height: 400px;
background-color: red;
z-index: 99;
}
.div2 {
position: absolute;
width: 100%;
height: 100%;
}
.div2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.div3 {
position: absolute;
width: 100%;
height: 100%;
align-items: center;
}
.image-container {
justify-content: center;
height: 100%;
width: 100%;
align-items: center;
display: flex;
}
.image-container img {
width: 125px !important;
margin: auto;
position: relative;
height: auto;
z-index: 40;
}
.div1:hover .div3 img{
transform: scale(1.25);
}
.div1:hover .div2 img{
opacity: 0.5;
}
.div3 img {
transition: transform 0.3s ease-in;
}
.div2 img {
transition: opacity 0.3s ease-in;
}
<div class="div1">
<div class="div2">
<img src="https://wallpaperscraft.com/image/absolute_vodka_collection_alcohol_drinks_20440_1920x1080.jpg" />
</div>
<div class="div3">
<div class="image-container">
<img src="https://ez.no/var/ezflow_site/storage/images/media/images/symfony-2.3-lts-in-ez-publish-platform-5.2/390464-1-eng-GB/Symfony-2.3-LTS-in-eZ-Publish-Platform-5.2_fancybox.png" />
</div>
</div>
</div>

How to stop css animation in current position on hover?

I have a div inside which moves another div. I need to stop .block at the current position when I hover on .container. How to do it?
HTML:
<div class="container">
<div class="block"></div>
</div>
CSS:
.container {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #000;
position: relative;
}
.block {
width: 100px;
height: 100px;
background: red;
position: absolute;
animation: move 2s linear infinite;
}
#keyframes move {
0% { left: 10px; }
25% { left: 50px; }
50% { left: 100px; }
75% { left: 50px; }
100% { left: 10px; }
}
DEMO

You can add
.block:hover
{
animation-play-state: paused;
}
to pause the animation when you hover over it.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

You can pause animation when hover on .container. Consider following css:
.container:hover .block{
animation-play-state: paused;
}
DEMO

CSS:
.container:hover > .block {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
JS:
var node = document.getElementsByClassName("block")[0];
node.addEventListener('mouseenter', function(evt) {
evt.currentTarget.style.webkitAnimationPlayState = 'paused';
});
node.addEventListener('mouseleave', function(evt) {
evt.target.style.webkitAnimationPlayState = 'running';
});

JQuery rotate two side back forth on hover (3D)

I have two side front and back. By default front is displayed, when I hover over it it display the back(ie the other side). The problem is that it returns to front by itself, what i wanted to do is unless I hover over it I want the back side to remain as it is.(Rotate back fort on hover)
Here is a live example:
$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
#keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(90deg); }
}
.spin-cube {
animation: spin 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>

This solves the problem
$(".cube").mouseover(function(){
if($(".cube").hasClass("spin-cube-front")){
$(".cube").addClass('spin-cube-back');
$(".cube").removeClass('spin-cube-front');
}else{
$(".cube").removeClass('spin-cube-back');
$(".cube").addClass('spin-cube-front');
}
});

$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: transform 1s ease;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}

This would be more easily done using a transition instead of an animation. Here is an example:
$(document).ready(function(){
var isClassy = false;
var cooldown = false;
$(".cube").mouseover(function(){
if (cooldown) return;
if (!isClassy) {
$(".cube").addClass('spin-cube');
isClassy = true;
} else {
$(".cube").removeClass('spin-cube');
isClassy = false;
}
cooldown = true;
setTimeout(function() {cooldown = false;}, 500);
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: all 1s ease;
transform: rotateY(0deg);
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>