http://www.apple.com/why-mac/
has a cool little thing where you hover your cursor over the image and it scrolls upward to show hidden text.
I'm wanting to create a mockup with that same effect, where I have the mockup as one flat background image and then place the scrolling images on top of it.
Any ideas as to how I can do this?
You can do this with jQuery scrollable: http://flowplayer.org/tools/scrollable/
Looking into the source for the page (with Firefox/Firebug, by the way, which is awesome for this kind of reverse-engineering) I see that the javascript framework Scriptaculous is in use. Specifically, the BlindUp animation appears to be the one in use on that page.
Apple uses Scritaculous for that effect.
CSS Transitions?
(From the link above):
Transitions are specified using the following properties:
transition-property – What property should animate, e.g., opacity.
transition-duration – How long the transition should last.
transition-timing-function – The timing function for the transition
(e.g., linear vs. ease-in vs. a custom cubic bezier function).
transition – A shorthand for all three properties.
Here is a simple example:
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
Related
So I'm working on a project that requires me to make an animated flag purely with HTML5 and CSS3—looking something like this, and with this kind of movement.
I know there exist some solutions with HTML canvas, but my client specifically requested this be done with CSS3 (and as little javascript as possible). For the waving effect, the only solution I found was to create several div elements and have each with an animation delay on the translateY to create the flag effect all together (JSFiddle here) and do the exact same thing for the text.
I can also make the text overlap the flag by making the text have an absolute position, but my problem is I'm not sure how I can coordinate the wave movement of the text with the flag's so it can be exactly the same. Or, alternatively, if there's another way to do this animation (not sure yet how I'm going to work around the triangles at the edges)? I know an image can be used to animate over it; what would be more efficient in this case?
We can do the animation in CSS3 using Keyframes.
You have to have the transparent image which will have the set of frames(all frames in single image) and animate using keyframes.
Here is one Example like that - https://codepen.io/Guilh/pen/yldGp
HTML
<div class="monster"></div>
CSS
body {
background: #24aecd;
}
.monster {
width: 190px;
height: 240px;
margin: 2% auto;
background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
animation: play .8s steps(10) infinite;
}
#keyframes play {
100% { background-position: -1900px; }
}
I hope this will help you
How can I select a div when I hover a child h1 with css3 only.
I want the div to have a animated opacity:0, done with keyframes. I can do the keyframes part by myself. Just need help with the selection.
Ho ho .... the thing that you are asking is known as JS dom manipulation. For that a language is developed -- JavaScript. Any selection of HTML element and further manipulation is out of scope of CSS. It is only for styling and not for node manipulation dear!
Try out jQuery with .parentsUntil selector and your problem will be solved. Also, there is no such selector which would turn heel from end element to go to parent by CSS only. Though with SASS/LESS there may be some possibliites. But only CSS3 -- Nil, ie 0.
Does something simple like that work as you wish?
.wrapper{
background:red;
transition: opacity 1s ease-in-out;
}
.header:hover {
opacity: 0.5;
}
<div class="wrapper"><h1 class="header">Title</h1></div>
This question already has answers here:
How to select classes with spaces
(5 answers)
Closed 8 years ago.
I have been trying to figure out this piece of CSS animation . What I am not able to understand is how did the creator manage to elongate the toggle so smoothly , without any keyframe animation or transform property ? Also on the HTML side, what are the <b> tags doing ? If you notice the b tags have classes assigned to them as
<b class="b switch"></b>
but the same class is selected from CSS as
.switch{
}
How does that work without the "b" ?
Thanks in advance.
The animation is just a css transition with a very small delay. Look at the transition, transition-property and transition-delay calls in your codepen example that are like:
.check:checked ~ .switch {
right: 2px;
left: 22px;
transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition-property: left, right;
transition-delay: .05s, 0s;
}
And then there's also another cubic-brezier transition applied to the .track element when the checked element needs to return to its original css and position.
The cubic brezier is a curve type used in vector animations and this curve (and its parameters ilsted in brackets) combined with the transition delay is what accounts for the smoothness.
The basic idea behind our the above code block is:
The transition duration will be for a total of .35s (because transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);) and it will translate accross the css right and left values in accordance to its transition-property: left, right;. In addition, there will be a small delay time added to the elements transition values. The transition of the left value is passed a delay of .05s while the right property is given no delay by passing it a delay 0s.
For the cubic-bezier transition itself, it's a little more complex but don't worry not too much. You can think of each of the 4 values given in brackets as points on the x and y axis that control the velocity at which the element will transition at any given moment during its transition sequence of cubic-bezier(P0,P1,P2,P3); In other words, it smoothes out the animation by making the animation timing non-linear.
For more about cubic-brezier transitions see this tutorial and demo: http://www.hongkiat.com/blog/css-cubic-bezier/
The <b> tag can be used to denote bold text. Here it's not really doing that though. Often designers will use <i> (which is italics) or <b> tags as a place holder for some element which they've assigned a background img or other visual styling too because since the <b> tag only effects text they can be sure their css won't be effected by the html call.
My goal is to create a page with 3 absolutely positioned, overlapping divs. Only 1 div should be visible at a time. 3 buttons at the bottom of the page are used to "select" each div with a fade-in/out using CSS transitions.
I'm close but I have a small issue.
Currently, upon initialization the page is blank with 3 buttons.
My question is, how do I have the first div (with id="#1") appear by default upon initialization without the need to press a button. I still want div #1 to follow the normal fade-in/fade-out rules, with the exception of upon initialization.
HTML:
<div id="1" class="inner">One</div>
<div id="2" class="inner">Two</div>
<div id="3" class="inner">Three</div>
Toggle One
Toggle Two
Toggle Three
SOME CSS:
.inner{
position:absolute;
visibility:hidden;
opacity:0;
transition:visibility 0s linear .5s, opacity .5s linear;
}
.inner:target{
visibility:visible;
opacity:1;
transition-delay:0s;
}
I would prefer a solution that doesn't use javascript/jQuery but I'm not against it if necessary.
Most likely you will need to use JavaScript/jQuery at a minimum to set the visibility of the #1 div on load. You can do this with CSS via:
.inner:first-of-type {
visibility: visible;
opacity: 1;
}
http://jsfiddle.net/74qYY/
The restriction there is that a background is required to obscure the other divs. If you can't live with that, you can always use JS: http://jsfiddle.net/74qYY/1/
For those interested, I found a round-about way to preserve the CSS transitions without requiring a background. Specifically I used the url fragments set by the buttons.
In the question, I wanted div "#1" to show as default. Another way to look at this is that I wanted a GET request of "/" to redirect to "/#1".
I used some jQuery to check for the absence of a URL fragment and then redirect to www.url.com/#1, which in turn triggers the CSS transition.
I am using the following css to make all items in the main DIV of my page to be transparented:
#wrapper
{
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
This works and everything gets transparented. But for example I DO NOT want the texts, images and buttons to be transparented. How can I do this?
You can do this like so:
#wrapper{
color:rgba(255,255,255,0.9);
}
You will have to use rgba() to achieve this. Take a look at this website:
http://www.css3.info/introduction-opacity-rgba/
I did also come over this problematic and solving it with rgba() is really the best way to get around this. Using transparent images as background, in my opinion is not as flexible as it should be and I'm really against using images when you can achieve the effects you want in other simpler ways.
You need to use a transparent background (in png) for your wrapper and do not use opacity
The child-elements inherit the opacity and you can not directly change it back. But there is a workaround http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/