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
Related
it is my first time using flex and I tried to make a responsive navbar and it is success in a way. Things I want to do:
Make the hamburger icon turn to X with smooth transition.
Make the menu opening with smooth slide down transition (instead of instant showing).
Add [ border-bottom: 1px solid black; ] to .social-icons when the menu is opened (active).
Add [ border-radius: 0; ] to .social-icons ul li:first-child when the menu is opened (active).
I've tried many things, watched many tutorials but I can't make it. Here is the code:
Help will be much appreciated.
You can not expect people to finish your code off, especially when it is something simple as HTML & CSS.
First of all I am going to explain it how you can accomplish 3rd and 4th problem that you have.
When you click hamburger icon to show menu, it adds 'active' class name to 'navbar-links'.
Therefore you need to make something like this to accomplish what you want.
.navbar-links.active .social-icons{
...your style goes here..
}
How this works is that you are selecting elements that have both navbar-links and active as their class names. After that selector you are selecting child elements that have social-icons class name.
To make smooth animations when you open menu and when it resizes, I recommend you looking into w3schools tutorial where you can see how animations work.
Just add animation to hamburgers class name and as soon as it gets that class name it will make an animation that you designed.
Look at it this way, when you declare animation for a class, as soon as an element gets that class it will run an animation.
For instance you can do something like this :
CSS :
.toggle-button{
opacity: 0.5;
color : white;
}
.active_toggle_button{
animation : customAnimation 0.5s linear forwards;
}
#keyframes customAnimation {
to{
opacity: 1;
color : green;
}
}
And in your Javascript :
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active');
toggleButton.classList.toggle('active_toggle_button');
})
This will toggle "active_toggle_button" class to your hamburger when you click it. As soon as it adds this class to your hamburger it will do the animation.
As I said, look into the link I gave you from w3schools. This is just general idea to let you know how it actually works.
I had this working but seem to have messed it up along the way.
I am using a scroll highjack that will bring the user to a new section/card each time they scroll.
It is adding a visible class each time the user scrolls to a new section/card.
I used this as the base https://codyhouse.co/gem/page-scroll-effects
<section class="cd-section visible">
<div>
<h2>Page Scroll Effects</h2>
</div>
</section>
Then when the user scrolls to a new section it removes and adds the visible to the next section.
I am animating basic content at the moment like hero text etc for each section.
<section class="cd-section visible">
<div class="home__content-slide-right">
<h2>Page Scroll Effects</h2>
</div>
</section>
I am using the class name; home__content-slide-right here to animate this text using transform for now, which you can see below;
.home__content-slide-right {
transform: translateX(-50px);
}
How I was doing it was buy just appending the .visible to the CSS which you can see below;
.visible .home__content-slide-right {
transform: translateX(0);
}
This was working so when I scrolled to each page the animation played but now it seems to only work once when the whole page is loaded and that's it.
I have tried to remove somethings but have had no luck so far, just wondering here if anyone else had a reason for it not working.
------Edit------
I have added a few images below so you can see what my issue is.
This first image is with the section having the .visible class so the animation should be played.
Though as you can see when I leave the section and the .visible class is removed the css stays the same.
It looks like you have the "visible" class being applied to a parent element of your target section.
Your css:
.visible .home__content-slide-right {
transform: translateX(0);
}
is written so that any parent of that element with a .visible class will apply this css rule. If you want to ensure that this fires only when visible is added to the same section, re-write the css like this:
section.visible .home__content-slide-right {
transform: translateX(0);
}
Or make sure that no parent element has the visible class applied if it is unnecessary.
Here is a pen for what I have so far. I've been using CSS3 however I'm open to using other methods if it will work better:
.userAttributes > .attributeGroup > .favoriteArtistsAttr {
max-width: 74%;
animation: marquee 10s linear infinite;
}
#keyframes marquee {
0% { text-indent: 0; }
100% { text-indent: -100%; }
}
I'd like the marquee to begin repeating itself the moment that as the end of the p has slid into frame. I also need the marque to stop with a mousover and be scrollable (this part works already).
I found this example that accomplishes what I want to achieve. I noticed that they are doing so by duplicating the content, however I've been unable to get this to work correctly. I also wonder if this is the best way to achieve my goal, maybe it would be better to use javascript or some jquery plugin? I want to make sure that it works and looks the same on all browsers (within reason)
I've updated your originally linked example fiddle with your 'genres' heading:
http://codepen.io/anon/pen/oxEPeZ
What I've noticed is that your markup you provided is a bit wrong, so going on the original this is what's happening:
The title block should be in it's own separate div. I've set my version of your title to float to the left of the marquee div.
Then, the marquee div needs to be wide enough to contain all the text- I set it to 500px so the items don't start stacking when they reach the maximum width of the container.
After that, you need to make sure you have two spans with your content. In your link you were working on, you only had one paragraph tag for each list of items. That's the main reason why it wasn't repeating.
So now, our markup for just the Genre section looks like this:
<div class="title">
Genres:
</div>
<div class="marquee">
<div>
<span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
<span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
</div>
</div>
I've put the marquee and title into a container div and duplicated it for the favourite artists.... (this can be named whatever, but what I have done here is used margin-bottom to create the space below each item, instead of <br> tags).
Because our second ticker has more content, I've added another class called 'stretched' to give the marquee more width.
I know I haven't directly edited your fiddle sorry, however hopefully this helps get you out of trouble.
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/
I tried a lot to solve the following: A click on "#pageTitle" should open the "#expandMenu". The expandMenu is exactly located in the bottom of the menubar. As you can see in CSS, there is a hover effect on the background-color. The code works fine so far, but even thought I still have a problem: The menubar should stay in the hover-color, till the toogleMenu gets closed. The user need to reach the expandMenu with his mouse for interacting. But after that, with my current code the via jQuery added css doesn't reset itself to the default css-hover mode.
It also would be nice, if the solution could include the possibility to add some further events, for example a switching icon (open, closed)
The CSS:
#expandMenu {
background-color: #009cff;
opacity: 0.8;
height:65px;
width:100%;
display:none;
}
#menubar {
height:95px;
width: 100%;
color:#FFF;
}
#menubar:hover {
background-color:#0f0f0f;
transition: background-color 0.3s ease;
color:#FFF;
}
jQuery:
$(document).ready(function(e){
$("#pageTitle").click(function() { $('#expandMenu').slideToggle( "fast");
$('#menubar').css( "background-color", "#0f0f0f" ); } );
})
HTML:
<div id="menubar">
<div id="pageTitle">Start</div>
</div>
<div id="expandMenu">
</div>
I have created a fiddle here that I think captures your page pretty well. I have tweaked the css class for the menubar a little bit so that the text stays visible, but the main change I have made is adding a class to the #menubar rather than directly applying the new background color. Then when you are hiding the #expandMenu you can remove the class to go back to the original color, whatever it was.
I check whether the expandMenu is visible and adjust the classes accordingly:
if ($('#expandMenu').is(':visible'))
{
$('#menubar').removeClass('menu-active');
}
else
{
$('#menubar').addClass('menu-active');
}
I check this state before I toggle the menu item because the slideToggle takes some time to finish, and the div is not visible immediately after the call. Checking its state before applying the animation avoids this problem.