Develop Reference

Scrolling to div id, stack and after "stop" div id hiding (not smoth scrolling)

Have a script that showing some div when page scrolling to less than 1400 (<1400), if more than 1400 the div is hiding. But i need that div showing not by height (1400) rather by div id and hiding by "stop" div. Please can you help me.
<style>
#goSale {position:fixed;bottom:-300px;width:auto;height:auto;}
#goSale img {opacity:100;-moz-animation:blink normal 3s infinite ease-in-out;-webkit-animation:blink normal 3s infinite ease-in-out;
-ms-animation:blink normal 3s infinite ease-in-out;animation:blink normal 3s infinite ease-in-out;animation-iteration-count:5;-ms-animation-iteration-count:5;
-webkit-animation-iteration-count:5;-o-animation-iteration-count:5;border:0px;width:100px;height:auto;}
</style>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() < 1400){
$('#goSale').stop().animate({
top: '65px'
}, 1);
}else{
$('#goSale').stop().animate({
top: '-100px'
}, 1); } });
$('#goSale').scroll(function() {
$('html, body').stop().animate({
scrollTop: 0
}, 1, function() {
$('#goSale').stop().animate({
top: '65px'
}, 1); }); }); });
</script>
<div id="goSale"><img src="img/pages/sale.png"></div>
Example: http://www.vichy.ho.ua - top right black cube and other leftside and right side "scrolling" elements, like Youtube and other...

So you want it to be hidden when another particular div is in view. Well, you have to know the position of that div and adapt your scrolled comparison using that number.
So you have to take 3 measurements:
User's screen height
The top position of your "stop div"
The bottom position of your "stop div"
Then, some simple math... And compare with scrolled position.
$(document).ready(function(){
// Get some measurements
var stopPosition = $("#stop").offset().top;
var stopHeight = $("#stop").outerHeight();
var displayHeight = $(window).height();
// Scroll handler
$(window).scroll(function() {
// Show the fixed black image when the stop div is in view
if($(this).scrollTop() < stopPosition-displayHeight || $(this).scrollTop() > stopPosition+stopHeight){
$('#goSale').stop().animate({
top: '65px'
}, 1);
// Else, hide it.
}else{
$('#goSale').stop().animate({
top: '-1000px'
}, 1);
}
});
});
#a,#b,#c{
height:1000px;
}
#a{
background-color:blue;
}
#b{
background-color:orange;
}
#c{
background-color:green;
}
#stop{
height:300px;
border:10px solid red;
}
#goSale{
position:fixed;
top:65px;
right:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a"></div>
<div id="stop">
<h1>The phone number in the black image is not shown when I'm in view.</h1>
</div>
<div id="b"></div>
<div id="c"></div>
<img id="goSale" src="http://www.vichy.ho.ua/img/pages/sale.png">

I need to close a gap in this JQuery animation

Here is my Jquery code:
var img = function() {
$(".slider#1").delay(1000).fadeIn(1000);
$(".slider#1").delay(3000).fadeOut(1000);
$(".slider#2").delay(5000).fadeIn(2000);
$(".slider#2").delay(3000).fadeOut(1000);
$(".slider#3").delay(10000).fadeIn(2000);
$(".slider#3").delay(3000).fadeOut(1000);
$(".slider#4").delay(15000).fadeIn(2000);
$(".slider#4").delay(3000).fadeOut(1000, function() { img() });
};
Essentially what I am trying to do is when one image fades out I would like an image to almost be behind it and fade straight into that without being a blank space in between, is this possible?

You could use the jQuery fadeTo function.
Like
$(".slider#1").fadeTo(1000,1);
And make all your sliders overlap each other with opacity 0.
Edit :
You can try this fiddle :
http://jsfiddle.net/8cwA6/22/
It recursively changes the opacity. All the images are on top of each other, then it fades out Level 1, then Level 2, and then fades both of them back (because Level 3 is on the bottom). You'll probably understand better when you see the code.
JavaScript
var max = 3
var min = 1
var showTime = 1500
function fade(num) {
if (num > min) {
$('.' + num).delay(showTime).fadeTo("slow", 0, function() {
fade(num - 1);
});
} else {
$("div").delay(showTime).fadeTo("slow", 1, function() {
fade(max)
});
}
}
fade(3);
HTML
<div id="img1" class="1"></div>
<div id="img2" class="2"></div>
<div id="img3" class="3"></div>
CSS
#img1 {
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :1;
}
#img2 {
width:100px;
height:100px;
background-color:blue;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :2;
}
#img3 {
width:100px;
height:100px;
background-color:green;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :3;
}

You have to queue the animations, or they will get mixed up after some time, since your animations are running asynchronous;
I did stack all images, and all are visible (you could set z-index just to be certain).
Fading out the top most, the next one is showing up.
The bottom most, doesn't have to be faded. I fade in the first one again, before resetting/showing all the other images once again and resetting the recursion.
jsfiddle
http://jsfiddle.net/Drea/hkzbvew4/
js
var images = ['.slider1', '.slider2', '.slider3', '.slider4']; // .slider4 is always visible
var img = function (i, showtime, fadetime) {
$(images[i]).delay(showtime).fadeOut(fadetime).queue(function () {
i++;
if (i < images.length-1) { // run through images
img(i, showtime, fadetime);
$.dequeue(this);
} else { // reset animation
$(images[0]).delay(showtime).fadeIn(fadetime).queue(function () {
$(".slide").fadeIn(0);
img(0, showtime, fadetime);
$.dequeue(this);
});
$.dequeue(this);
}
});
};
img(0, 1000, 1000);
html
<div class="slide slider4"></div>
<div class="slide slider3"></div>
<div class="slide slider2"></div>
<div class="slide slider1"></div>
css
.slide {
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 50px;
}
.slider1 {
background-color: black;
}
.slider2 {
background-color: green;
}
.slider3 {
background-color: blue;
}
.slider4 {
background-color: red;
}

The Google card's "Flip and Grow" effect

I have been doing some research on how to create a flip and grow effect like Google card does (click on any card):
http://www.google.com/landing/now/#cards/restaurant-reservations
All resources I found is about flipping a card with front and back of same size but this is not what I'm looking for.
Any feedback will be hugely appreciated.

Both of the answers posted here are good generic css flippers but they don't address the core of the question which is "how does Google do it?". The problem is that google minifies and therefore obfuscates their code which makes it tough to tell exactly whats going on but using a DOM inspector you can get a pretty basic idea. This is the abstract:
Build a "clone" div that contains a front and a back child div but is hidden by default. Set it's css transition property to ~.5seconds so that any move it makes will be animated.
When a user clicks on a card in the grid, set the clone so it's the same position/dimensions as the clicked card, copy the contents of the clicked card into the front child element and set it as visible
Hide the original clicked card with visibility:hidden
At this point you now have a clone of the originally clicked card in the exact same place but no one can tell
Set css for top, left, height, width of the clone div to precalculated dimensions centering in the screen while also setting transform:rotateY() of the front/back children
At this point it appears as if the div is lifting up, flipping around, and moving/resizing to the center of the screen. An empty spot is left behind because the original card is still there, but visibility:hidden allows it to take up space without showing its contents
A click handler is set up so that when the user clicks outside of the clone card, the top,left,height,width,transform:rotateY() css is reset back to the original values which make it fly back in place.
Then the clone is hidden again and the original card is made visible
Demo: http://jsfiddle.net/jwhazel/AaU6v/11/
(Developed in Chrome, may need some vendor prefixes for other browsers)
HTML
<div class="cards">Generic Tile Card</div>
<div id="cardClone">
<div id="cloneFront">cardclone front</div>
<div id="cloneBack">cardclone back</div>
</div>
CSS
body {
position: relative;
font-family:Helvetica, Arial, Sans-serif;
text-align:center;
}
.cards {
margin:30px;
width:200px;
height:200px;
background-color:#59A3FF;
cursor:pointer;
display:inline-block;
overflow:hidden;
}
img {
display:block;
width:80%;
height:auto;
margin:0 auto
}
#cardClone {
position:fixed;
display:none;
margin:30px;
width:200px;
height:200px;
-webkit-transition:.6s;
transition:.6s;
-webkit-transform-style::preserve-3d;
transform-style:preserve-3d;
z-index:99;
perspective: 1000px;
-webkit-perspective: 1000px;
}
#cloneFront, #cloneBack {
backface-visibility: hidden;
width:100%;
height:100%;
position:absolute;
-webkit-transition:.6s;
transition:.6s;
overflow:hidden;
}
#cloneFront {
z-index:100;
background-color:#59A3FF;
transform: translatez(0);
}
#cloneBack {
transform:rotateY(-180deg);
z-index:101;
background-color:#aaa;
}
Javascript
//Cache the clone since we have to select it a couple of times
$clone = $('#cardClone');
//Set a global for the card we just clicked so we can track it
$lastelement = "";
//Set up an object for last clicked element so we know where to return to on collapse
lastelement = {
'top': 0,
'left': 0,
'width': 0,
'height': 0
};
//Set a flag to determine the current flip state of our clone
cloneflipped = false;
//Bind a handler to the clone so we can detect when the transition is done
$('#cardClone').on("transitionend", function (e) {
if (e.target === e.currentTarget) {
if (e.originalEvent.propertyName == 'top') {
//Toggle the clone state
cloneflipped = !cloneflipped;
//Detect if our clone has returned to the original position and then hide it
if (!cloneflipped) {
$($lastelement).css('opacity', 1);
$($clone).hide();
} else {
//Need to dynamically alter contents of the clone rear AFTER it animates? Do it here
//$('#cloneBack').html('hi');
}
}
}
});
$(".cards").click(function () {
if (!cloneflipped) {
//Cache clicked card
$lastelement = $(this);
//Store position of this element for the return trip
//[hack: subtract 30 due to the margin of .cards in this demo]
var offset = $lastelement.offset();
lastelement.top = offset.top - 30 - $(document).scrollTop();
lastelement.left = offset.left - 30;
lastelement.width = $lastelement.width();
lastelement.height = $lastelement.height();
//BONUS: lets check to see if the clicked card is further to the left or the right of the screen
//This way we can make the animation rotate inwards toward the center, google doesn't do this
var rotatefront = "rotateY(180deg)";
var rotateback = "rotateY(0deg)";
if ((lastelement.left + lastelement.width / 2) > $(window).width() / 2) {
rotatefront = "rotateY(-180deg)";
rotateback = "rotateY(-360deg)";
}
//Copy contents of the clicked card into the clones front card
$clone.find('#cloneFront').html($lastelement.html());
//Show the clone on top of the clicked card and hide the clicked card
//[hack: using opacity for hiding here, visibility:hidden has a weird lag in win chrome]
$clone.css({
'display': 'block',
'top': lastelement.top,
'left': lastelement.left
});
$lastelement.css('opacity', 0);
//Need to dynamically alter contents of the clone rear BEFORE it animates? Do it here
//$('#cloneBack').html('hi');
//Flip the card while centering it in the screen
//[hack: we have to wait for the clone to finish drawing before calling the transform so we put it in a 100 millisecond settimeout callback]
setTimeout(function () {
$clone.css({
'top': '40px',
'left': '40px',
'height': '400px',
'width': $(document).width() - 140 + 'px'
});
$clone.find('#cloneFront').css({
'transform': rotatefront
});
$clone.find('#cloneBack').css({
'transform': rotateback
});
}, 100);
} else {
$('body').click();
}
});
//If user clicks outside of the flipped card, return to default state
$('body').click(function (e) {
if (cloneflipped) {
if (e.target === e.currentTarget) {
//Reverse the animation
$clone.css({
'top': lastelement.top + 'px',
'left': lastelement.left + 'px',
'height': lastelement.height + 'px',
'width': lastelement.width + 'px'
});
$clone.find('#cloneFront').css({
'transform': 'rotateY(0deg)'
});
$clone.find('#cloneBack').css({
'transform': 'rotateY(-180deg)'
});
}
}
});

your code is here ! clickFLIPgrove
You can scale size of a div by css property called
transform:scale(2,2);
it will double the size of your element
refer this link for all css effects: cssAnimation
I have created flip effect on hover:
hoverFLIP
html
<div class="cards"></div>
css
body{
position: relative;
}
.cards{
margin:30px;
perspective: 500;
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
-o-perspective: 500;
width:200px;
height:200px;
background-color:#59A3FF;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
position:absolute;
cursor:pointer;
/* Animate the transitions */
-webkit-transition:0.8s; text-align:center;
-moz-transition:0.8s; text-align:center;
-ms-transition:0.8s; text-align:center;
-o-transition:0.8s; text-align:center;
transition:0.8s; text-align:center;
}
.flip{
transform:rotateY(180deg) scale(1.2,1.2);
-webkit-transform:rotateY(180deg) scale(1.2,1.2);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
background-color:#FF5959;
}
javascript(add Jquery 2.1.0)
$(".cards").click(function(){
$(this).toggleClass("flip");
});

Try this jsFiddle
Base on this, make a 3d transform and left offset in transition,
-webkit-transform-style:preserve-3d;
-webkit-transform:rotateY(0deg);
-webkit-transition:-webkit-transform 0.25s , left 0.25s;
Use the css3 transform and transition.
Hope this can work for you.: )

maybe you like this one. check out my code using keyframes.
https://jsfiddle.net/jariesdev/y7Lz3mm0/
html:
<div id="logo">
<a>
<img src="http://fallbacks.carbonads.com/nosvn/fallbacks/2053cd7a29af8f37381467e04521a14e.png">
</a>
</div>
css:
#logo {
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
}
#logo a {
display: inline-block;
}
#logo:hover a {
animation-name: rotateThis;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function:ease-in-out;
}
#keyframes rotateThis {
0% { transform:scale(0) rotateY(180deg) translateX(-100%);}
/*60% { transform:scale(.5) rotateY(90deg) translateX(-50%); }*/
100% { transform:scale(1) rotateY(360deg) translateX(0);}
}

Slide div when page loads

I need to create a function that will animate div sliding from the left when the page loads. It needs to delay the animation for about 5 seconds. The example can be seen at this link
http://www.exacttarget.com/blog/amazon-dash-the-skinny-on-this-stick/
just under the title there is a section with share count. I need to create a function that will slide the item that has all the numbers summarized. This is the one on the right with gray background.

Hey i am not Css expert but what the site people doing is bit from CSS as well.So i made this jsfiddle .This might help you .I am not sure this will be working in all browsers as so far.You can use jQuery as fall back for browsers who doesn't support CSS3 Transition
The code i used is :
div
{
width:100px;
height:100px;
background:red;
transition-property: margin-left;
transition-duration: 2s;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
margin-left:-100px;
}
div.active
{
margin-left:0px;
}
The jQuery code is :
$(function(){
$(".mydiv").addClass("active");
console.log($(".mydiv"));
});
Fiddle

$(document).ready(function () {
$("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});

html
<div id="upper_div"></div>
<div id="slideBox"></div>
CSS
#upper_div{
width:200px;
height:50px;
background-color:#E5E5E5;
float:left;
}
#slideBox{
width:50px;
height:50px;
background-color:#CCCCCC;
float:left;
display:none;
}
jQuery
$(document).ready(function () {
$("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});
DEMO

How to autoscroll horizontally with jquery

I'm trying to make horizontal scrolling effect using two buttons, left and right. But I can't sort it out. I managed to scroll to next element but then scrolling stops and I can't scroll to another element.
$(document).ready(function(){
$("#left").click(function(){
$(".wrap").animate({scrollLeft: 0}, 1000);
return false;
});
var item_width = $('.label').outerWidth();
$("#right").click(function(){
$(".wrap").animate({scrollLeft: item_width}, 1000);
return false;
});
});

You need to keep track of your current index. You have shifted right once (the width of item_width), but the second time you need to animate scrollLeft: item_width*2, the third item_width*3, etc.
set a variable in your document ready that starts at 0, and its incremented or decremented when you click on either right or left, and then change 0 and item_width to item_width * index

Uhm i'm not sure you can use "{scrollLeft: item_width}" for element different to body o window... but if you can do this change part your script:
{scrollLeft: item_width}
to
{scrollLeft: "+="+item_width}
JS:
$(document).ready(function(){
var item_width = $('.label').css("width");
$("#left").on("click",function(){
if(parseInt($(".wrap").css("margin-left")) == 0) return;
$(".wrap").animate({marginLeft: "+="+item_width}, 1000);
return false;
});
$("#right").on("click",function(){
$(".wrap").animate({marginLeft: "-="+item_width}, 1000);
return false;
});
});
For example you can use this
html:
<div id="right">></div>
<div id="left"><</div>
<div class="wrap">
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
</div>
css:
body{
margin:0;
padding:0;
}
.wrap{
overflow:hidden;
float:left;
width:903px;
height:200px;
position:relative;
}
.label{
display:block;
float:left;
width:300px;
background-color:red;
border-left:solid 1px black;
position:relative;
height:200px;
}
#right,#left{
position:absolute;
background-color:purple;
color:white;
top:100px;
width:20px;
height:20px;
margin-top:-10px;
text-align:center;
line-height:20px;
display:block;
z-index:2;
cursor:pointer
}
#right{
right:0;
}
see the example here:
http://jsfiddle.net/u3hB8/4/