On my main page, I have 3 links (images). Like a portal.
This is what i want to make:
When you click on one of the links, you zoom really far onto that one. So far that it filled up the full screen. But I dont want you to see whats in that page yet.
Example:
http://prezi.com/0ehjgvtr9fzu/?utm_campaign=share&utm_medium=copy (click on the cloud which says:"Main idea")
Is this possible with HTML/CSS/JavaScript?
You can't "zoom" the viewport but you can use CSS/JS to mimic the behavior by scaling elements in animations. With CSS transforms/transitions you can pretty easily scale a "page" down and then expand it on click (like your demo Flash object).
Basic demo:
#container {
transform-style : preserve-3d;
perspective : 400px;
}
#container .page {
transition : transform 500ms ease-out;
transform : scale(0.2);
}
#container .page.make-page-big {
transform : scale(1);
}
Where #container is the "viewport" and .page is a page that will be animated into full-view.
Here is a demo: http://jsfiddle.net/j1k3mcLp/
That should get you started, you can do a lot with 3D transforms as well, which will allow you to really get the effect you want.
UPDATE
Here's a demo using 3D transforms: http://jsfiddle.net/j1k3mcLp/1/
Related
I recently "made" a website for a friend and it stopped working after I edited some of the content. I don't know why the whole website is broken. It should have images and such...
Please take a look at the website and tell me if anything stands out to why it doesn't work. Thanks!
I have looked at all the html tags and they are all fine.
Your problem is opacity for <article> div is 0:
#main article{
opacity: 0;
}
change to
#main article{
opacity: 1;
}
You have set the opacity to 0 for all ARTICLE elements within your main DIV. I see you have a transition setup for opacity, so I'm assuming you meant to either adjust that opacity value via a script or an animation. Either way, until you implement such, remove the opacity style:
#main article {
...
opacity: 0;
}
As jQuery.fadeIn is not very smooth on mobile devices I try to use CSS but it doesn't work as expected. How to create a smooth CSS animation using Javascript?
In general this is what I'm trying:
$('div')
.css('opacity', 0) // at first, set it transparent
.css('display', 'block') // make it appear
.css('transition', 'opacity 1000ms linear') // set a transition
.css('opacity', 1); // let it fade in
https://jsfiddle.net/8xa89y04/
EDIT1:
I'm not searching a solution using static CSS classes. The point is: I need to set this dynamically in Javascript code - a replacement for jQuerys fadeIn() for example.
Your logic isn't quite right. Firstly you cannot animate display, so to achieve what you require the element has to always be rendered in the DOM (ie. anything but display: none). Secondly, the transition property should be placed within the CSS styling itself. Finally you can make this much more simple by setting all the rules in CSS classes and just turning the class on/off. Try this:
div {
position: absolute;
width: 100px;
height: 100px;
background-color: black;
opacity: 0;
transition: opacity 1000ms linear;
}
.foo {
opacity: 1;
}
$('div').addClass('foo');
Working example
Use this code.
CSS
div {
width: 100px;
height: 100px;
background-color: black;
transition:opacity 2s;
}
JavaScript
$('div').hover(function(){
$(this).css('opacity','0');
})
Without using CSS properly, you are going the long way about it. You'll need to emulate what you would normally do in CSS, using JavaScript, so you'll be setting all your CSS properties, transitions etc, then applying them with js.
I can't personally see any benefit in doing this. Using actual CSS would be cleaner, more efficient, more maintainable, and simply a plain better solution to what you need.
I think this is what you are looking for.
$('div').css({"display":"block", "opacity":"0"}) //Make div visible and opacity as "0"
$('div').animate({opacity :1}, 1000); //Animate div to opacity "1"
Take a look at this Demo
Found the cause here: CSS transitions do not work when assigned trough JavaScript
To give this attention I need to give the browser some time - or better: a working slot to activate the transition as the time seems not to be a problem.
The following code cuts the process in two by using setTimeout()... and it works!
var div = $('div');
// first process
div
.css('opacity', 0) // initial opacity
.css('display', 'block') // make it appear (but still transparent)
.css('transition', 'opacity 1s linear'); // set up a transition for opacity
// break - start the transition in a new "thread" by using setTimeout()
window.setTimeout(function(){
div.css('opacity', 1); // start fade in
}, 1); // on my desktop browser only 1ms is enough but this
// may depend on the device performance
// maybe we need a bigger timeout on mobile devices
I have a background image that has 4 images of a character in different walking positions.
Is it possible on scroll with Skrollr to move the sprite position (let's say by 150px on the x co-ordinate) every 0.5 seconds?
Want to give it a walking effect but only on scroll.
Maybe there's another way to achieve this effect? Quite keen on only using Skrollr as I've used it in the past and LOVE it!
The only way I've managed to achieve this so far is by creating a sprite of images on a completely landscape canvas type so that all of the images are changed upon the X-Axis then using skrollr stylesheets (click here for github) to apply the animation upon scroll.
Start by making a Skrollr.css file. Be sure to include the 'data-skrollr-stylesheet' to the link tag.
<link href="css/skrollr.css" rel="stylesheet" data-skrollr-stylesheet>
Right before the closing body tag, include the skrollr stylesheet min js file followed by the skrollr JS. See below.
<script type = "text/javascript" src="dist/skrollr.stylesheets.min.js"></script>
<script type = "text/javascript" src="js/skrollr.js"></script>
To get you started I've placed a simple demo of what your skrollr stylesheet should look like.
.div-name {
-skrollr-animation-name: animation1;
}
#-skrollr-keyframes animation1 {
500 {
background-position: 0px;
}
600 {
background-position: -100px;
}
}
The numbers in the animation are relative to the top of the browser window. 600px from the top of the window, the background-position will move -100px on the X-axis.
I am currently trying to figure out how to remove the transition/slider effect on scroll. Personally I'd like the images to change on demand rather than scroll. I hope my instruction has given you something to start with and if I figure out how to change the image instantly without the transition, I will expand on this here. Good luck with the project.
I managed to include frame-by-frame sprite animation in skrollr by adding a custom easing that does the trick. Math.round in my intuition would return sort of a square wave and surprisingly it worked (but be aware, I'm not sure about the math behind it):
var s = skrollr.init({
easing: {
frames: function(p) {
return Math.round(Math.sin(p) * 50);
}
}
});
This custom easing will:
loop your animation without any interpolation so that you don't get that infamous "sliding" instead of the animation.
After that you call the animation on css this way (please note I'm using skrollr stylesheet but there's no reason why it shouldn't work directly with html data tags as well):
.animation{
display: block;
width: 208px; /*your sprite width*/
height: 227px; /*you sprite height*/
background-image: url(yourspritesheet.png);
background-position: 0px 0px;
-skrollr-animation-name: youranimation;
}
#-skrollr-keyframes youranimation{
start{background-position-x[frames]:0px;}
end{background-position-x[frames]:208px;}
}
In this example, the spritesheet is horizontal and 208px is the sprite width. The code will go through the spritesheet at steps of 208px and start from the beginning when it reaches the end. Tested on Chrome, Firefox and Safari. You can find an example of the result here (school project): http://www.sartirani.it/daniele/scroll/public_html/
I've written an Ionic app, where nine images are positioned inside a DIV. Here's the relevant snippet from my CSS file:
.mydiv {
position: relative;
overflow: hidden;
}
.mydiv > img {
position: absolute;
box-shadow: 6px 6px 8px #aaaaaa;
}
I'm using $ionicGesture.on('drag', function(e) {}) to move these images around, following the move of my finger. That's the relevant part from my controller.js:
jQuery('.mydiv > img').each(function(i, myImg) {
jQuery(myImg).css('left', initLeft + e.gesture.touches[0].pageX - initX);
jQuery(myImg).css('top', initTop + e.gesture.touches[0].pageY - initY);
}
So, basically, every time the drag event occurs, I move the images by changing their 'left' and 'top' attribute.
The problem is though, that this solutions works wonderfully in a browser, but is horribly lagging as an Ionic app on my iPhone 5. When I put the contents of the Ionic 'www' folder on a web server and access the web app with my iPhone's web browser, the movement is extremely smooth. So, obviously, it's not a performance issue, but Ionic is doing something that makes the app stuttering. Using the Chrome profiler on my Mac, I learned nearly all of the time is used by internal Ionic functions and not by my client code. This seems to be another hint, that this is some kind of Ionic problem.
Why is my app, that runs perfectly smooth in my mobile browser on the same device gets jerky as hell when packed as an Ionic app?
Additional information:
Those images I drag along are scaled with jQuery(myImg).width(). I now replaced them with pre-scaled image files and got rid of the box-shadow style. Now the lagging is reduced but still worse than in the mobile browser. Is it possible, that the mobile Safari on my iPhone uses the GPU for Javascript induced style changes, while for a Cordova app the GPU is not used?
Looks like you have animation issue. Here is an article from Ionic team that explains on how to deal with this.
What’s happening is that as you try to animate the left property of
the items, the web view will have to go back and try to recalculate
that item’s position. This happens for a lot of CSS properties.
Thankfully, we have other ways to animate these items.
Let’s change that left property to transform and set the value to use
translate3d. Translate3d is a special CSS value that will actually
move the animation to the device’s GPU. This is called hardware
accelerated animation.
#-webkit-keyframes slideIn {
0% {
left: -100%;
}
100% {
left: 0;
}
}
#-webkit-keyframes slideInSmooth {
0% {
-webkit-transform: translate3d(-100%,0,0);
}
100% {
-webkit-transform: translate3d(0,0,0);
}
}
.slide-in{
-webkit-animation: slideInSmooth ease-in 1;
animation: slideInSmooth ease-in 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 750ms;
animation-duration: 750ms;
}
I haven't seen your animation or your code but my guess is that the device GPU isn't carrying the weight it should.
Obviously without seeing your app, I'm doing some guessing here -- but from what you've described this may be the issue:
There are a couple ways to get the GPU to kick in, but the most basic is not to animate using "top" and "left". Using standard CSS positioning like top/left to animate DOM elements works, but it's the slowest way to go and as you've discovered: performance tends to suck in many environments. (Particularly when you're using complex images or blurs/shadows).
A far better way to go is to use translateX / translateY which engages the GPU. That should give you silky smooth performance. Using translateX and translateY will also allow for subpixel rendering and give a far smoother appearance than using top/left which blips along pixel-by-pixel.
There's an excellent discussion of this by a Chrome team member here:
https://www.youtube.com/watch?v=NZelrwd_iRs
Lastly, if for some reason you must use top/left -- a quick and somewhat hacky method to get the GPU to kick in is to set the parent DIV to translate3d(0, 0, 0);
This forces the parent layer into the hands of the GPU (via 3D transforms) during the browser-paint, and the subsequent standard CSS top/left changes that you're using should now render using the GPU. Needless to say, this second method isn't the best way to go in terms of best-practices, so go with CSS transforms first if that's an option.
Using transform: translate3d() does the trick. Animations are now extremely smooth. Because I had some trouble to convert my code from the CSS left-top-style to using translate3d(), here is what I did as a reference for other users:
jQuery('.mydiv > img').each(function(i, myImg) {
var x = initLeft + e.gesture.touches[0].pageX - initX;
var y = initTop + e.gesture.touches[0].pageY - initY;
jQuery(myImg).css({
'-webkit-transform' : 'translate3d('+x+'px, '+y+'px, 0px)',
'transform' : 'translate3d('+x+'px, '+y+'px, 0px)'
});
}
I even can switch on box-shadow again and the animation stays silky smooth.
How can we show text in zoom in effect. I saw it on one travel site. I did google but cant find this kind of effect. I just want little hint what kind of effect is this. I red about easing but did not find the same effect. I have attached screenshot for the same. Here is link of that website http://cleartrip.com/flights?ui=v3. The effect is on payment page
Ok, so when you do something to make the section appear, the button within it animates from nothing to 100% size from its center point. So basically what you are asking is how to make something grow from 0% to 100% via animation. There's probably a totally javascript way but I personally would use css animation for this.
Suppose you are adding a class to the parent div to reveal a section of content (in the example you linked to it is revealing a section of the order form) all you need to do is in the css add an animation to the button that is triggered when the section gets a class added. In my example below I'm calling the section 'page' and assuming you're adding a class of 'active' to reveal it - obviously these could be anything you like:
Html:
<div class="page">
<div class="animated_button">Look at me</div>
[other content that you don't want to animate]
</div>
Css:
.page{
display:none;
}
.active{
display:block;
}
.animated_button{
[styling for how you want your button to look]
}
.active .animated_button{
animation: growUp 0.4s;
}
#keyframes growUp {
0% { transform:scale(0); }
100% { transform:scale(1); }
}
Note that you may need to add vendor-prefixes for the transforms.
Here is a codePen - there's a few extra styles and stuff in there just to show an example of how it works:
http://codepen.io/chrisboon27/pen/weJmL