I came across this interesting effect over at http://birvacreativestudio.com/theme/birva200/index.html The one I am talking about is the changing text (Probably the first thing you'll notice)
I got inspector out to see how it was done, but can't figure it out, Is the developer using purse css for this or some sort of mixture with javascript/jQuery?
Could anyone explain to me how to replicate it with jQuery? Are there any plugins/libraries that are good for these type of effects?
They're using Owl Carousel.
See the FadeUp transition here: http://owlgraphic.com/owlcarousel/demos/transitions.html
You can get great text animations easily with this JS animation platform:
http://www.greensock.com/gsap-js/
(just look at the animated header on that page, you'll see what can be done with this + its faster then jQuery animate)
Related
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
From what I can see the div below sort of eats into the image above as you scroll down creating what I think is a nice visual.
My only problem is I don't know what the terminology is to search for a tutorial on the process itself.
Does anybody know what search term I would use to find a good tutorial? I have literally tried everything I thought it might be called.
Example on a site where it is used: http://www.anakin.co/en
The term is called parallax scrolling.
The following link is a good tutorial, and explains how to achieve this in just CSS.
http://keithclark.co.uk/articles/pure-css-parallax-websites/.
Regarding the cutout effect I believe that is called clip masking.
The main content is on an overlay. If you look at the code though, in the css you'll see the "clip" property. It's since been deprecated, but it's been replaced by "clip-path". Showing parts of an image is called clipping/Masking and I believe you can find what you're looking for here:
https://css-tricks.com/clipping-masking-css/
EDIT: The background image is using parallax, which gives the background image "motion" when you scroll. But the actual effect of having that background show through is the clipping/masking in the article.
It's called Parallax scrolling http://en.wikipedia.org/wiki/Parallax_scrolling
How can a website shift effect be done like this website? http://showmyshift.com/# When you click a link, the content flies by and shifts.
I believe they are either using CSS3 or Jquery to do this, how can it be done?
EDIT: I also have no idea what this effect is called, nor have I seen it before. I'm hoping someone more experienced has seen this effect before and knows what it is.
it's just a slider, simply look for a slider that allows linking to specific slides, like Unslider (tricky if you don't know what are you doing) or Owl Carousel or the millions out there, and simply link each menu item to a slide. You can also use CSS, but for what you say about your knowledge, it's not recommended since it's way more difficult
This project I am working on required me to build a moving animation that uses nothing other than css and styled divs.
A perfect working example of something almost identical can be found here (note the blue background white moving squares):
http://www.braintreepayments.com
However, unlike the demo above, my design consists of about 10 times more div shapes in the animation and when the animation timing expires, the container becomes blank, which makes it looks like it was poorly designed.
My question is, how does the animation in the above example create the 'continuous / infinite effect' on their website, with so little styled divs? I have been trying to formulate something to replicate this effect no success.
Note: I open to using a JQuery / Javascript solution as well.
By using the anitmation-iteration-count property and using the infinite value - you will have a hard time finding the matching selector as their CSS is minified, but that rule exists somewhere in their stylesheet.
I am trying to make it so that when you hover over a div, it triggers an image to rotate in another div.
I have been trying to use this plugin, http://code.google.com/p/jqueryrotate/
Here is my code in a jsFiddle. The green square is rotating using CSS3, however I need to support IE9+ so I need to do it using the jQuery!
The blue square is the one I am trying to animate using jQuery, for the purpose of the example I have just googled a random image, as I read that you cannot rotate a div with jQuery, only images.
http://jsfiddle.net/D6HQR/
I really have no idea what I am doing wrong, could any jQuery wizards please save me!!!!
UPDATE
http://jsfiddle.net/HAqQT/
I now have the jQueryRotate plugin working, however it is not working in IE9. The website states that it should work for IE6+
At the moment the blue square is continuously rotating using jQuery, the green square rotates when you hover over the button using CSS3.
Can anyone see a reason why the jQuery wouldn't work in IE9+?
UPDATE 2
http://jsfiddle.net/tpHdg/
Code update, blue square now spins when you hover, stops when you hover off.
Still looking for help for IE9 incompatibility.
Final Update
Thanks to everyone who helped, in the end I slowly worked my way through it. The reason it wasn't working on IE9 was because of an 'ActiveX Filter' setting, whatever that is....
For now I have a jQuery version working, and the CSS3 version for when it is more supported. If you would like to check out both version here are the links... Feel free to reuse the code if it helps your project!
http://mathewhood.com/misc/css3/rotate/ - CSS3
http://mathewhood.com/misc/js/rotate/ - JS
Thanks again!
I have worked out some code based on the plugin examples:
http://jsfiddle.net/MJyFf/
Ps.: Your revised code is working in IE9.
Ps2.: Hover the blue square on my example