I want to get an effect like https://www.stpeterscollege.lk/history-of-our-college to a HTML code of mine. Can someone help me with this please?
There is a micro-library named scroll-out that help in scroll detection and that will make it easy for you to get such effect. Here is a link to it.
You just need to add following CSS
[data-scroll] {
transition: opacity 1s;
}
[data-scroll="in"] {
opacity: 1;
}
[data-scroll="out"] {
opacity: 0;
}
And this in HTML to apply scroll effect on all elements.
<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
<script>
ScrollOut();
</script>
Follow the docs for more info.
I've been trying to change image source on hover, however i can use mousehover function with class name and do this. The challenge here is i'm going to dynamically call more divs with same class name so i'm trying to achieve this using the this method. for some unknown reason i couldn't execute my below code. can anyone suggest what seems to be the problem? Pasting my code below
$(".img_staff").mouseover(function() {
alert(2);
$(this).find('.staffimg:first-child').css("display","none");
$(this).find('.staffimg:nth-child(2)').css("display","block");
alert(3);
});
Both the alerts are working fine just the inbetween 2 lines are not working. i want to achieve this effect like moca tucson site's contact page
https://moca-tucson.org/contact/
I'm trying to recreate the same effect using Jquery
Apart from changing the image, the link that your provided also uses CSS transitions to bring that "image transition" effect.
Here's the similar effect with just CSS, without any javascript.
HTML:
<div>
<img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_001-800x800.jpg">
<img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_002-800x800.jpg">
</div>
CSS:
div img:last-child { opacity: 0 }
div:hover img:first-child { opacity: 0 }
div:hover img:last-child { opacity: 1 }
img {
position: absolute;
transition: 0.3s;
}
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
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/
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