I am trying to redo the a tutorial I had posted links to in previous question to have as much HTML5 and CSS3 code. I read in some online article's that in HTML5 they are trying to get rid of the idea of Div tags, rather they are pushing for something known as section. Is that a correct observation. For example I have this section of code from the above tutorial.
https://skitch.com/android86/r67ey/dreamweaver
and what I am interested to know if I should be using div tags in my HTML5 code as well or is there a better way to do it rather than using Div's?
What I have in my HTML5 code at present is the following.
https://skitch.com/android86/r67ej/dreamweaver
Thanks for the group's valuable input.
a proof of concept for a sliding link over content (with display: block) on hover, using CSS3 transitions only.
NOTICE: this is a webkit (safari & chrome) only syntax, for the syntax for the rest of the browsers go here: http://css3.bradshawenterprises.com/transitions/
a simple element, with the following style:
a {
z-index: 100;
position: fixed;
-webkit-transition: all 1s ease-in-out;
display: block;
background-color: black;
width: 100%;
height: 500px; }
and the hover state style:
a:hover { height: 700px; }
The code submitted looks good, however I would include the extra lines to cover Firefox and Opera.
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
You can then use Modernizr (http://www.modernizr.com/) to cover all browsers with backup Javascript.
I would use something like this:
a.slideDown {
z-index: 100;
position: fixed;
display: block;
background-color: black;
width: 100%;
height: 500px;
-webkit-transition: top .2s ease;
-moz-transition: top .2s ease;
-o-transition: top .2s ease;
transition: top .2s ease;
top:5px;
}
a:hover.slideDown {
top:495px;
}
If you are including CSS3 as part of HTML5 (which you have to to allow animation!), have a look at: http://css3.bradshawenterprises.com/sliding/ . The jQuery isn't necessary, you could use the :target pseudo element instead.
For your case, just set a transition on the element, then change the height, or top value using the target selector.
It's probably around 4 lines of code if you only want it to work in newer browsers.
I'd agree with the comments about using CSS3 for transitions. I used this on a portfolio site and it looks fairly good. It's just a couple lines of code and if the browser doesn't support the transitions it will still display the content on hover, just without the animation.
Related
I'm really struggling trying to create smooth CSS transitions in Safari. I'm trying to hide/show divs by changing their height with a JavaScript onclick event. The resulting transitions are nice and smooth with Chrome, Firefox, and Edge. However with Safari it just looks bad and must be around 15 fps when rendering.
A basic JSFiddle is here: https://jsfiddle.net/q5a9b62s/6/
The website I'm working on is here: http://www.allinimages.ch/
Thanks.
You could try using JavaScript to add a className to you div like this:
function grow() {
var element = document.getElementById("boxid");
if (!element.className) {
element.className = 'tall';
} else {
element.className = '';
}
};
I've added the nullification of the className to enable toggling of the animation.
Then, let CSS processing do all of the transforming for you:
#boxid {
background-color: red;
width: 50px;
height: 50px;
position: relative;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
#boxid.tall {
height: 500px;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
transform: translate3d(100) /* this property ensures GPU processing cross-browser */
}
Codepen example is here.
Great article on smooth CSS transitions is here.
Some issues for cross-browser use of translate3d are documented here.
I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.
Quick code (Not my actual code but it represents it):
#myDiv {
background: black;
color:white;
float:left;
min-width:45px;
max-width:450px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#myDiv:hover:after {
width: inherit;
content: " This should resize my div. transitioning the new width.";
}
<div id="myDiv">Here</div>
I know this question might be too tricky because selectors are elements apart (or something like it, I havent gotten too deep into the subject), but I need help finding a work around for this (Javascript welcomed, JQuery too: I would rather not though, since Im not too friendly with heavy libraries for small things), if anyone has time its much appreciated.
If you want to see what Im trying to achieve, comment below and ill post my actual code.
The problem is that transition doesn't work when you go from or to a property with auto. Check this out Transition to and from position Auto
You can do some workaround to achieve what you want e.g:
#myDiv {
background: black;
color:white;
float:left;
width:45px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#myDiv:hover{
width: 450px;
}
#myDiv:hover:after {
width: inherit;
content: " This should resize my div. transitioning the new width.";
}
<div id="myDiv">Here</div>
But that depends on your markup and your needs so if this not helps, you can add more details to your question or best add your real code.
I'm using the Foundation framework on a project & it's Top Bar feature for navigation allows for drop-down navigation to appear on hover.
During the hover event it adds a .hover class to the relevant element, therefore the changes in CSS pop into sight rather than animating by way of a smooth transition.
This got me thinking. Is it possible to animate (via transitions or similar) the changes in CSS definitions?
Take this example. Here is our default element:
<div class="a-box">Some content</div>
And it's default CSS:
.a-box {
width: 200px;
height: 200px;
background: red;
}
On hover the framework (which I do not wish to edit the core file to keep it clean for updates) adds the hover class. Making our element now look like this:
<div class="a-box hover">Some content</div>
Here could be some CSS for the hovered element:
.a-box.hover {
width: 400px;
// I thought perhaps adding the following would work but it doesn't appear to
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
I'd be keen to hear others POV on this! I'm not sure if this is a duplicate, but all the posts I've read relate to some form of jQuery animation.
You aren't far off the mark, here is a working example.
The main error in your example is that you have
<div class="my-box hover">Some content</div>
But your CSS is looking for a-box not my-box.
As a habit, I normally define the animation on the simplest (most general) selector for the element and then any additional selectors will benefit from it.
.my-box {
width: 200px;
height: 200px;
background: red;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
transition: all 200ms ease;
}
.my-box.hover {
width: 400px;
}
I'm trying to animate the elements when they are filtered by javascript but the codes below don't work. Any suggestion?
This is what I have so far.
http://jsfiddle.net/ejkim2000/J7TF4/
$("#ourHolder").css("animation","scaleUp 0.3s linear 0.4s forwards");
$("#ourHolder").css({"animation" : "scaleDown 0.3s linear 0.4s forwards"});
On second thought, is there any other way that I can animate the elements by using css only?
I suggest you do it using CSS transitions. I believe this is what you're trying to do, but I can't find the referenced 'scaleDown' animation anywhere. My solution animates both width and height of the .item elements when toggling an additional '.hidden' class on them:
#ourHolder div.item.hidden {
transition: all 0.3s linear
}
#ourHolder div.item.hidden {
width: 0;
height: 0;
overflow: hidden;
}
Full solution on http://jsfiddle.net/5pKwy/
EDIT: Fiddle using min-height and min-width: http://jsfiddle.net/5pKwy/1/