Apple.com product animation - javascript

http://www.apple.com/mac/ (the products animating into position)
Anyone know how apple does this?
I don't need useable code. Just an idea of how to accomplish it.
I use the jQuery framework.
EDIT: Thanks to Jordan for pointing this out. Apple is using css3 animations for this, not javascript.
If anyone has a good idea on doing this with JS please post.

Apple is using CSS3 animations for this. Check out the CSS file and scroll down to /* animations.

Here I made a version in jQuery, which works in all browsers. Using this technique, you have many ways to do it using different CSS approaches, like absolute divs inside a relative one, etc. and then changing that values with the jQuery's animate function. I made it as simple as possible.
http://jsfiddle.net/sanbor/SggMG/
HTML
<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="clearFloat"></div>
<a id="resetAnimation" href="#">Run animation again</a>
CSS
.box {
background: red;
width: 100px;
height: 50px;
margin: 10px;
float: left;
margin-left: 100%;
}
.clearFloat {
clear: both;
}
JS
function animateBoxes() {
$('.box').each(function(index, element) {
$(element).animate({
'marginLeft': '10px'
}, {
duration: 500,
specialEasing: {
marginLeft: 'easeOutBounce'
}
}, function() {
// Animation complete.
});
});
}
$('#resetAnimation').click(function() {
$('.box').css('marginLeft', '100%');
animateBoxes();
});
animateBoxes();
Alternate way, with css3 (http://jsfiddle.net/sanbor/SggMG/6/)
This also can be done with css3 transitions, which is more, because just add an smooth effect between property changes, but animation allows to apply certain
HTML
<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="clearFloat"></div>
<a id="resetAnimation" href="#">Click twice</a>
CSS
.clearFloat {
clear: both;
}
.box {
background: red;
width: 100px;
height: 50px;
margin: 10px;
float: left;
}
.box.moveit{
-webkit-animation-name: moveit;
-webkit-animation-duration: 1s;
-moz-animation-name: moveit;
-moz-animation-duration: 1s;
-ms-animation-name: moveit;
-ms-animation-duration: 1s;
animation-name: moveit;
animation-duration: 1s;
}
#-webkit-keyframes moveit {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
#-moz-keyframes moveit {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
#-ms-keyframes moveit {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
#keyframes moveit {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
JS
$('#resetAnimation').click(function() {
$('.box').toggleClass('moveit');
});

Related

How can I change the function in this script from .click to .scroll (and still have the script working)

How can I change the function in this script from .click to .scroll (and still have the script working) so that the action is executed on scrolling instead of clicking?
The js code changes the posititon of 3 icons/images that are initially positioned behind another image/icon. Like this: https://prnt.sc/gCyTQDqS_dtD after a click on the image: https://prnt.sc/CjAbwM1D1Cvw
Thanks for your help :-)
<style>
.has-transform, .transform_target .et-pb-icon {
transition: all 400ms ease-in-out;
}
.toggle-transform-animation {
transform: none !important;
}
.transform_target {
cursor: pointer;
}
.toggle-active-target.et_pb_blurb .et-pb-icon {
background-color: transparent;
}
</style>
<script>
(function($) {
$(document).ready(function(){
$('.transform_target').click(function(){
$(this).toggleClass('toggle-active-target');
$('.has-transform').toggleClass('toggle-transform-animation');
});
});
})( jQuery );
</script>
Sadly I think the best solution is to change the entire approach. One option to react to scrolling is to use an intersection observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#result
See the little intersection observer demo below; the 2nd kitten will fade into view only when you scroll down
const one = document.querySelector(".one");
const two = document.querySelector(".two");
function handler(entries, observer) {
for (entry of entries) {
if (entry.isIntersecting) {
two.classList.add("show")
} else {
two.classList.remove("show")
}
}
}
let observer = new IntersectionObserver(handler);
observer.observe(two);
.kitten {
width: 100px;
height: 100px;
border-radius: 50%;
}
.two { opacity: 0; }
.two.show{
animation: fadeIn 5s;
animation-fill-mode: forwards;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#wrapper {
padding-top: 100vh;
padding-bottom: 100vh;
}
scroll me
<div id="wrapper">
<img class="kitten one" src="//placekitten.com/100/100">
<img class="kitten two" src="//placekitten.com/200/200">
</div>

How to prevent a rotated div from moving when changing its width?

I have a reproduction of the issue I'm facing below:
.rect {
transform: rotateZ(45deg);
background-color: #ddd;
position: absolute;
width: 300px;
height: 200px;
animation: 3s linear 0s infinite normal none running widen;
}
#keyframes widen {
from { width: 300px; }
to { width: 500px; }
}
<div class="rect"></div>
Notice how as the rectangle gets wider, its position also changes. It is true that the element's programmatic position isn't changing, but visually on the screen it appears it is.
I am only looking to widen it without having it visually appear to move. That is, the right side of the rectangle should simply extrude out an additional 200 pixels. Is this possible?
Looking around, it seems like setting the transform-origin from center to top left accomplishes this effect, but unfortunately my rectangle's origin of rotation is around its center. Perhaps the solution is to temporarily set it in some way while the effect is occurring..
An easy way to do this is to wrap the grey rectangle div in another div that does the rotating. That way the width and rotation can be controlled independently.
If other transformations need to be applied as well, this approach gives you control over the order the transformations will be applied.
.rect {
transform: rotateZ(45deg);
}
.widen {
background-color: #ddd;
width: 300px;
height: 200px;
animation: 3s linear 0s infinite normal none running widen;
}
#keyframes widen {
from {
width: 300px;
}
to {
width: 500px;
}
}
<div class="rect">
<div class="widen" />
</div>
That squish effect is expected, but for this scenario I'd suggest not animating the size properties anyway since it's going to push your natural DOM flow around with if there's other elements. Instead try scale transform, see below.
.rect {
transform: rotate(45deg);
background-color: #ddd;
position: absolute;
width: 300px;
height: 200px;
transform-origin: center left;
animation: 3s linear widen infinite;
}
/*
#keyframes widen {
from { width: 300px; }
to { width: 500px; }
}
*/
#keyframes widen {
to { transform: rotate(45deg) scaleX(2);
}
<div class="rect"></div>
It looks like it is moving because of the angle. If you want it to grow proportionally, add height to the animation.
Example 1:
.rect {
transform: rotateZ(45deg);
background-color: #ddd;
position: relative;
width: 300px;
height: 200px;
animation: 3s linear 0s infinite normal none running widen;
}
#keyframes widen {
from { width: 300px; height: 200px; }
to { width: 500px; height: 400px; }
}
<div class="rect"></div>
If we remove the rotation, it won't look like it is moving.
Example 2:
.rect {
background-color: #ddd;
position: relative;
width: 300px;
height: 200px;
animation: 3s linear 0s infinite normal none running widen;
}
#keyframes widen {
from { width: 300px; }
to { width: 500px; }
}
<div class="rect"></div>

Scale animation using jQuery fadeOut()

I was searching a while but didn't found a post about this: I'm using jQuery fadeOut() to animate an element.
I want to fade out the element with a scale of 1.75 (175%) by using jQuery's fadeOut() function. At the moment it's a common fade out animation, but I'd like that the fade out animation scales out (element inflates).
I've made an example (the lightblue element) with a CSS animation using keyframes. I would like to solve the animation with fadeOut() (maybe you have to scroll down the snippet to see the example), is this possible? I hope this is clear enough.
$('.hide').click(function() {
$('.animate').fadeOut(500);
});
$('.show').click(function() {
$('.animate').fadeIn(500);
});
.animate {
width: 150px;
height: 150px;
background-color: lightcoral;
margin-top: 20px;
}
.animate--css {
background-color: lightblue;
}
.animate--css {
width: 150px;
height: 150px;
background-color: lightblue;
margin-top: 20px;
animation: zoomOut 1s infinite;
}
#keyframes zoomOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.75);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide">Fade out</button>
<button class="show">Fade in</button>
<div class="animate"></div>
<div class="animate--css"></div>
You can use start to apply a CSS before fading the element:
$('.hide').click(function() {
$('.animate').fadeOut({'start':function() {$(this).css('transform','scale(1.75)') },'duration':500});
});
$('.show').click(function() {
$('.animate').fadeIn({'start':function() {$(this).css('transform','scale(1)') },'duration':500});
});
.animate {
width: 150px;
height: 150px;
background-color: lightcoral;
margin-top: 20px;
transition:0.5s all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide">Fade out</button>
<button class="show">Fade in</button>
<div class="animate"></div>

How to change background color every n-seconds?

So a while back I think i saw an effect on some site that was transitioning between different background colors (changing background colors).
The color changed like every 2-3 seconds.
The transitions were pretty smooth as well. I found it pretty cool.
I'm redesigning my services website and would like to add that effect to my site.
There are 2 variables that need to be controlled: time and color.
P.S. Not trying to get anyone to write the code for me, but could you please refer me to some links where I can find out about this effect.
Would be great if you could tell me the name of this effect and the library it exists in.
Here's JS Fiddle that shows you some #keyframes in combo with the js to slow down timing via click. Hope that helps!
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
#keyframes colorChange {
0% {
background: red;
}
20% {
background: blue;
}
40% {
background: green;
}
60% {
background: orange;
}
80% {
background: purple;
}
100% {
background: red;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
$( ".button" ).on( "click", function () {
$( ".body" ).css( "animation-duration", "20s" )
})
Edit
Added snippet.
$( ".button" ).on( "click", function () {
$( ".body" ).css( "animation-duration", "20s" )
})
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
#keyframes colorChange {
0% {
background: red;
}
20% {
background: blue;
}
40% {
background: green;
}
60% {
background: orange;
}
80% {
background: purple;
}
100% {
background: red;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
<div class="body">
<button class="button">Change Timing</button>
</div>
To change your website background color in a defined time interval you can follow the bellow link.
http://www.cakephpexample.com/html/add-gradient-effect-to-your-website-by-javascript/
Where a complete example given with source code.
You can possibly do it with CSS3 animation keyframes.
Take a look at this Fun With Pulsing Background Colors in CSS3.

CSS3 Animation: Forwards fill not working with position and display on Safari

So, I have created a CSS3 animation that is supposed to fade out an element by setting its opacity from 1 to 0 and at the last frames change the position to absolute and display to none. But on Safari it will only maintain the opacity, position and display are not set to the final values.
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
display: block;
position: relative;
}
99% {
opacity: 0;
position: relative;
}
100% {
opacity: 0;
display: none;
position: absolute;
}
}
It seems to work on Chrome but not on Safari (I tried version 8). Apparently, position and display do not work properly with animation-fill-mode: forwards...
JSFiddle: http://jsfiddle.net/uhtL12gv/
EDIT For Bounty: I am aware of workarounds with Javascript and transitionend events. But I am wondering why Browsers lack support for this? Does the specification state that fillmode forwards doesnt apply to some attributes like position or is this a bug in the browsers? Because I couldnt find anything in the bug trackers.. If anybody has some insight, I would really appreciate it
As Suggested in the comments, you can adjust the height.
EDIT: Animation Reference Links Added.
Display property is not animatable.
Position property is not
animatable.
List of all CSS properties and if and how they are
animatable.
$('.block').click(function() { $(this).toggleClass('active') });
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
height:0;
}
}
.block {
width: 100px;
height: 100px;
background: blue;
}
.block2 {
width: 100px;
height: 100px;
background: red;
}
.block.active {
-webkit-animation-name: impressum-fade-out;
animation-name: impressum-fade-out;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block2"></div>
I would suggest you the cross-browser solution based on CSS3 Transitions and transitionend event:
JSFiddle
$('.block').one('click', function() {
var $this = $(this);
$this.one('webkitTransitionEnd transitionend', function() {
$this.addClass('block_hidden');
$this.removeClass('block_transition');
});
$this.addClass('block_transition');
});
.block {
width: 100px;
height: 100px;
background: blue;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.block_2 {
background: red;
}
.block_transition {
opacity: 0;
}
.block_hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block block_2"></div>

Categories

Resources