The problem is, that translateX is not changing it's position right before animating. In the example problematic slide is #slide2, i'm changing it's position before animating and it still animate from the wrong side.
How to fix that behavior? Using css left property instead is fixing this, but i want to use translateX.
Thanks.
html:
<div id="slide1"></div>
<div id="slide2"></div>
css:
div {
position:absolute;
left:0px;
top:0px;
background:red;
width:100%;
height:300px;
-webkit-transition: all 0.4s linear;
}
#slide2 {
background:blue;
-webkit-transform: translateX(100%);
}
javascript:
$('#slide2')
.css('-webkit-transition','none')
.css('-webkit-transform','translateX(-100%)');
$('#slide1').css('-webkit-transform','translateX(100%)');
$('#slide2')
.css('-webkit-transition','all 0.4s linear')
.css('-webkit-transform','translateX(0%)');
jsfiddle playground:
http://jsfiddle.net/D5d9e/
Updated - Try this:
$('#slide2')
.css('-webkit-transition','none')
.css('-webkit-transform','translateX(-100%)')
.css('-webkit-transform'); // wtf happens here
Fiddle: http://jsfiddle.net/D5d9e/6/
This works... for some reason.
Related
my first post!
I have been doing some experiments, trying to recreate something i saw.
Here is what i am trying to achieve:
Scroll at the end of this page and take a look at animated buttons for twitter, youtube, facebook
Now take a look at my code:
HTML
<div class="container">
<div class="letter">A</div>
</div>
CSS
*{
margin:0;
padding:0;
}
.container{
width:200px;
height:200px;
background:purple;
overflow:hidden;
}
.letter{
text-align:center;
font-size:50px;
line-height:170px;
color:white;
}
.letter:hover{
cursor:pointer;
}
.letter.zoom{
transform:rotate(15deg) scale(3);
transition: transform 0.6s ease;
}
Jquery
$(function(){
$('.container').on('click', function(){
$('.letter').toggleClass('zoom');
});
});
Now, if you run the code, you will see letter A, and on click it will zoom in and slightly rotate. Here are my issues:
1.how to do this on hover, using css3 or jquery or javascript?(not onmouseover/onmouseout)
2.how to make the rendering smoother?(the letter zooms in in poor resolution and than renders to full quality)
3.it has animated transition on zoom in. When it zooms out there is no animation or transition. How to do the animation on zoom out, on hover out?
I have tried to do separately just zoom in and just rotate, and it works, but if i want to do both in the same time, CSS3 is overriding one with another, and using this function is not giving me the result i want.
You can do this with just CSS:
Transition:
.letter {
transition: ease .25s; // when set on selector itself, will apply to all pseudo-classes such as: :hover, :active, :focus, etc.
-webkit-transition: ease .25s;
}
Zoom:
.letter:hover {
transform: scale(1.5); // Alternatively, you can use percentages
-wekbit-transform: scale(1.5); // Chrome / Safari
-moz-transform: scale(1.5); // Firefox
}
Rotate:
.letter:hover {
transform: rotate(15deg);
-wekbit-transform: rotate(15deg); // Chrome / Safari
-moz-transform: rotate(15deg); // Firefox
}
I have created a simple fade in and fade out. I am also trying to stop the animation process on mobile device.I am able to access below code on computer but i want to stop fadeIn and fadeOut on mobile device.
Please help me
HTML
<div id="wrap">
<img class="bgfade" src="img/background1.png">
<img class="bgfade" src="img/background2.jpg">
<img class="bgfade" src="img/background3.jpg">
</div>
css
#wrap{
position:fixed;;
z-index:-1;
top:0;
left:0;
background-color:black;
}
#wrap img.bgfade{
position:absolute;
top:0;
display:none;
width:100%;
height:100%;
z-index:-1;
background-position: center;
}
img {
transition: all .10s linear;
-webkit-transition: all .10s linear;
-moz-transition: all .10s linear;
-o-transition: all .10s linear;
}
#wrap img {
-webkit-filter: brightness(30%);
filter: brightness(40%);
}
js
$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
$("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(2000);
$("#wrap img").first().fadeIn(2000);
setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})
Here's dirty solution but you'll get idea of what you need to do.
CodePen link
What I done is just placed some !important rules based on media query breakpoint. You try to animate your images with class, and clear out those ugly code I put there, NOTE: it's just to help you with logic.
The jQuery stop() method is used to stop animations or effects before it is finished.
I have an image slider, it's going to the next/previous image fine.
The problem is that when you click the previous image button, the animation takes longer than when you click in the next image button, and the animation is the same for both!Can you tell me why is this happening?
JSFIDDLE:
http://jsfiddle.net/v6d16jza/
HTML:
<div id="slider">
<div id="setas-navegacao" style="position:absolute;height:100%;width:100%;">
<i class="sprite-slider_ant" style="z-index:1;position:absolute;left:1.7%;top:50%;color:#ffa500;font-size:15pt;"><</i>
<i class="sprite-slider_prox" style="z-index:1;position:absolute;right:68.5%;top:50%;color:#ffa500;font-size:15pt;">></i>
</div>
<div class="slide slide_ativo" style="background-image:url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg');">
</div>
<div class="slide" style="background-image:url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');">
</div>
<div class="slide" style="background-image:url('http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg');">
</div>
</div>
CSS:
html{
overflow: hidden;
width:100%;
}
div#slider{
position:relative;
overflow: hidden;
width: 300%;
height:300px;
}
.slide{
position:relative;
width:33.3%;
height:100%;
float:left;
background-size: cover;
-webkit-transform: translateZ(0);
-webkit-transition: margin-left 0.9s ease-out;
-moz-transition: margin-left 0.9s ease-out;
-o-transition: margin-left 0.9s ease-out;
transition: margin-left 0.9s ease-out;
}
jQuery:
$(".sprite-slider_prox").on("click", function(){
if($(".slide_ativo").next().is(".slide")){
$(".slide_ativo").css("margin-left", "-100%").removeClass("slide_ativo").next().addClass("slide_ativo");
}
});
$(".sprite-slider_ant").on("click", function(){
if($(".slide_ativo").prev().is(".slide")){
$(".slide_ativo").removeClass("slide_ativo").prev().css("margin-left", "0%").addClass("slide_ativo");
}
});
You are adding more margin than it's actually needed to shift the image to the left.
You can see what's happening with the Chrome inspector, hovering the images while they change (raising the animation time to some higher value will help you). You will notice that the delay before the slider starts moving back is spent removing the extra margin.
I recorded a video of the debugging.
If you change:
.css("margin-left", "-100%")
to:
.css("margin-left", "-33.333%")
the animation will work correctly (see the fiddle)
Also, note that I had to remove the padding and margin from html and body elements to achieve the correct shifting.
I am currently developing a HTML game for one of my programming classes and I want to add a "game over" screen that will display an image and information on their score before dying.
What I would like to happen is for the image to overlay the body of the page and start small in the middle of the screen and "expand" or zoom into the screen to a specific size. I'm not sure if that's clear but here is what I'm sort of looking for:
But I would like it to zoom in rather than just appear. Any links or help would be greatly appreciated because I don't even know what to search on google to get information on this!
Thanks in advance for any help!
It's really rough but you can do something like this:
JS
var $foo = $('#foo');
grow = function (size) {
if (size < 50) {
console.log(size);
$foo.css('width', size + '%');
$foo.css('height', size + '%');
size++;
setTimeout(grow, 10, size);
}
}
grow(0);
CSS
#foo {
position: fixed;
right: 0;
left: 0;
top:0;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top:auto;
margin-bottom:auto;
width: 0%;
height: 0%;
background-color: red;
}
https://jsfiddle.net/a05s1a44/
Change the timeout length to control the speed. Adjust the CSS as needed. Scale the size variable for the dimensions of your box. Change the limit. Do whatever. Should be enough to get you going.
FIDDLE: https://jsfiddle.net/shfv0b3f/
Using transform: scale and transition:
div {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
On game over:
div.zoom {
transform: scale(1);
}
This is what I have made for you and I hope it would help.
basically in a container which it may be the window of your game, I have added the "game over" container you want to show.
The rest of the html is just so you see some false content inside game container:
<div class="container">
<div class="stuff">and here is stuff</div>
<div class="stuff">etc, ect, ect</div>
<div class="stuff">more text</div>
<div class="stuff">and more</div>
<div class="button">Click here</div>
<div class="this-is-your-game-over"></div>
</div>
You can see there's also a class called button that I have used as to trigger the "game over" container zoom effect. In your game development you may use something else to do it.
Then, basically, you will have a "game over" container positioned as this:
.this-is-your-game-over {
position:absolute;
height:0px;
width:0px;
background-color:blue;
right:0;
left:0;
bottom:0;
top:0;
margin: auto;
}
so It is always centered and by jquery:
$(document).ready(function () {
$('.button').click(function () {
$('.this-is-your-game-over').toggleClass("this-is-your-game-over-ADDED");
});
});
When you click on button you add another class to the "game over" container that will make it grow to your desire size with a simple transition:
.this-is-your-game-over-ADDED {
height:80%;
width:50%;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
This is the FIDDLE to see verything in action
important: If in your html the this-is-your-game-over div is not at the end of your html you may need to add a positive z-indexto it.
This is perfect use case for CSS transitions and transforms.
Very basically:
#image {
transition: all 0.5s;
}
#image.hidden {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
Then you just toggle the .hidden class somehow, probably by JS.
Also, don't forget to add vendor prefixes (or use Autoprefixer).
See http://codepen.io/anon/pen/waaMvM for better example.
What's intended
I'm using a off canvas menu using CSS and JavaScript. The off canvas menu is working as intended. I want a sidebar menu that is left of the screen and moves along when the menu is triggered. The idea is to have a menu trigger that is 100px across and has a height of 100% and always left of the screen. Using position absolute I had problems with the height on all browsers, using fixed position Firefox works fine but encounters problems mentioned below.
Errors
Firefox Issues: None, as far as I can tell.
Chrome Issues: After scrolling a few pixels down the sidebar menu trigger does not stretch the entire page.
Internet Explorer: The sidebar seems to vanish completely when the sidebar menu is triggered.
jsFiddle
Because my code is heavy on both HTML, CSS and JavaScript I have included a jsFiddle. Please note that the problem only occurs on Chrome and Internet Explorer as far as I know. You can replicate the problem by scrolling down the page a little and then clicking the left hand side menu button.
Screenshots
NOTE WORTHY HTML CODE (Full Code in Fiddle)
<div id="sbContainer" class="sbContainer">
<div class="sbPush">
<header class="contain-to-grid sbMenu sbFX">
<nav class="top-bar" data-topbar>
<ul class="title-area show-for-small-only"><!--SITENAME--></ul>
<section class="top-bar-section"><!--LINKS--></section>
</nav>
</header>
<div class="sbContent-one">
<div class="sbContent-two">
<div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
<div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
</div>
</div>
</div>
</div>
NOTE WORTHY CSS CODE (Full Code in Fiddle)
html, body, .sbContainer, .sbPush, .sbContent-one {
height:100%
}
.sbContent-one {
overflow-x:hidden;
background:#fff;
position:relative
}
.sbContainer {
position:relative;
overflow:hidden
}
.sbPush {
position:relative;
left:0;
z-index:99;
height:100%;
-webkit-transition:-webkit-transform .5s;
transition:transform .5s
}
.sbPush::after {
position:absolute;
top:0;
right:0;
width:0;
height:0;
background:rgba(0,0,0,0.2);
content:'';
opacity:0;
-webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbMenu-open .sbPush::after {
width:100%;
height:100%;
opacity:1;
-webkit-transition:opacity .5s;
transition:opacity .5s
}
.sbMenu {
position:absolute;
top:0;
left:0;
z-index:100;
visibility:hidden;
width:244px;
height:100%;
background:#872734;
-webkit-transition:all .5s;
transition:all .5s
}
.sbMenu::after {
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.2);
content:'';
opacity:1;
-webkit-transition:opacity .5s;
transition:opacity .5s
}
.sbMenu-open .sbMenu::after {
width:0;
height:0;
opacity:0;
-webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbFX.sbMenu-open .sbPush {
-webkit-transform:translate3d(300px,0,0);
transform:translate3d(244px,0,0)
}
.sbFX.sbMenu {
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
.sbFX.sbMenu-open .sbFX.sbMenu {
visibility:visible;
-webkit-transition:-webkit-transform .5s;
transition:transform .5s
}
.sbFX.sbMenu::after {
display:none
}
.no-csstransforms3d .sbPush,.no-js .sbPush {
padding-left:244px
}
.sbMenuTrigger {
background-color:#b23445;
cursor:pointer;
height:100%;
width:100px;
position:fixed;
left:0;
top:0
}
.sbMainContent {
margin-left:100px;
width:calc(100% - 100px);
top:0;
padding-top:50px;
position:absolute;
height:100%
}
Here is a work-around that requires very little changes.
It works consistently in the latest versions of FF, Chrome, and IE11/10.
Updated Example
.sbContent-one {
overflow: visible; /* Or remove overflow-x: hidden */
}
.sbMainContent {
overflow-x: hidden;
}
.sbMenuTrigger {
position: static; /* Or remove position: fixed */
}
The easiest way to resolve the issue in Chrome is to simply move the overflow from .sbContent-one to .sbMainContent. In doing so, you can't actually scroll past the .sbMenuTrigger element (which resolves the issue) since .sbMainContent is a sibling element.
There are currently many inconsistencies across browser around how fixed elements are positioned relative to elements that are transformed using translate3d. The issue in IE was due to the fact that fixed elements are positioned relative to the window without taking the elements that are transformed using translate3d into account. To solve this avoid fixed positioning completely, and add the element .sbMenuTrigger back into the normal flow by removing position: fixed (or overriding that with position: static, the default). In doing so, the sidebar expands as expected.
In other words:
Remove overflow-x: hidden from .sbContent-one (or override it with overflow: visible).
Add overflow-x: hidden to .sbMainContent.
Remove position: fixed from .sbMenuTrigger (or override it with position: static).
Here is my solution to your problem. Tested on 3 mayor browsers and it works fine!
see fiddle
Take a look at my changes on the following classes:
remove position relative from .sbContent-one
add height: 100% to .sbContent-two (new rule)
major changes on .sbMainContent
position absolute for .sbMenuTrigger
the main problems were:
unnecessary position relative and absolute position from .sbContent-one and .sbMainContent.
position fixed is relative to the window, so its behavior varies across browsers when you translate the element.
I managed to make it working on last chrome/IE11.
jsfiddle
I moved the
<div class="sbMenuTrigger" data-effect="sbFX">
<div class="sbMenuIcon">
<div class="sbMenuIconBackground"></div>
<div class="sbMenuIconOverlay"></div>
</div>
<div class="sbMenuLogo">
<div class="sbMenuLogoBackground"></div>
<div class="sbMenuLogoOverlay"></div>
</div>
</div>
At the end of the <header> tag, so the CSS became:
.sbMenuTrigger {
background-color:#b23445;
cursor:pointer;
width:100px;
position:absolute;
right:-100px;
top:0;
bottom: 0;
}
The position fixed + transform are not always welcome by all browsers.