Jump to content
Please Use CODE Tags

HTML5/CSS3 fade-in box?

Jeroen1322
By Jeroen1322
in Programming
 Share
Posted

Hi guys!

 

I'm making a website for school and i have all the information in it but i want to make it better and let people say 'woah!'. I came acros this website and it had a really cool fade-in box (or how you would call it).

 

How is it made? Can someone link me the code or a tutorial?

 

Thanks!

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

JJJJJJJJJ jQueryyyyyyyyyyyyyy

 

http://jquery.com

That was to be expected :P

[CPU: AMD FX-6100 @3.3GHz ] [MoBo: Asrock 970 Extreme4] [GPU: Gigabyte 770 OC ] [RAM: 8GB] [sSD: 64gb for OS] [PSU: 550Watt Be Quiet!] [HDD: 1TB] [CPU cooler: Be Quiet! Shadow Rock Pro Sr1]  -Did i solve your question/problem? Please click 'Marked Solved'-

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

That was to be expected :P

Certainly, and with a reason.

It's like used.. everywhere on any website you'll find.

Go inspect the element and there are always jQuery references in the <head> tag.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

you can do this by

  1. placing the box out of the screen and transparent in CSS
  2. setting a CSS transition for the box
  3. moving the box inside page and making it visible via the style property of the box object

all of this is achieved without ugly jQuery, but IE <10 won't animate it, all other browsers will

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

you can do this by

  1. placing the box out of the screen and transparent in CSS
  2. setting a CSS transition for the box
  3. moving the box inside page and making it visible via the style property of the box object

all of this is achieved without ugly jQuery, but IE <10 won't animate it, all other browsers will

Ugly jQuery? 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Ugly jQuery? 

the code looks bad, jQuery promotes a coding style that is all about dollar symbols, brackets and anonymous functions

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

the code looks bad, jQuery promotes a coding style that is all about dollar symbols, brackets and anonymous functions

Code looking bad is a personal preference, any experienced programmer won't have any problem with jQuery.

It saves time compared to odd CSS methods.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Code looking bad is a personal preference, any experienced programmer won't have any problem with jQuery.

It saves time compared to odd CSS methods.

it's not about experience, jquery code looks pretty obvious due to how opaque it is, with the $ 'operator' that just does everything you throw at it

it's about elegance

 

CSS has nothing odd: it's just how browsers work, and jQuery will act on CSS anyway

 

but yes it saves time, if your priority is to get the job done in the shortest time and you don't care about how it happens, then sure jQuery is the way to go, but i don't think that spending a couple more minutes on this thing will hurt the OP

i just see a missed chance for a young web developer to understand how things work, that's why i don't like jQuery, even though i see the power that it has to offer

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

it's not about experience, jquery code looks pretty obvious due to how opaque it is, with the $ 'operator' that just does everything you throw at it

it's about elegance

 

CSS has nothing odd: it's just how browsers work, and jQuery will act on CSS anyway

 

but yes it saves time, if your priority is to get the job done in the shortest time and you don't care about how it happens, then sure jQuery is the way to go, but i don't think that spending a couple more minutes on this thing will hurt the OP

i just see a missed chance for a young web developer to understand how things work, that's why i don't like jQuery, even though i see the power that it has to offer

As long as you understand what jQuery does it's certainly not a crime to use is, but if the users aren't aware of what the jQuery execution actually changes in the CSS and such, that's a bad thing.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

As long as you understand what jQuery does it's certainly not a crime to use is, but if the users aren't aware of what the jQuery execution actually changes in the CSS and such, that's a bad thing.

yup

the OP can't code the fading box, so he wouldn't know what jQuery is doing, so i posted the other way to do it, the 'manual' way

it'll be up to him to check out the alternative or not

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Without JQuery you could do something like this:

div.fadeInBox {    -webkit-animation: fadein 2s; /* Safari and Chrome */       -moz-animation: fadein 2s; /* Firefox */        -ms-animation: fadein 2s; /* Internet Explorer */         -o-animation: fadein 2s; /* Opera */            animation: fadein 2s;}@keyframes fadein {    from { opacity: 0; }    to   { opacity: 1; }}/* Firefox */@-moz-keyframes fadein {    from { opacity: 0; }    to   { opacity: 1; }}/* Safari and Chrome */@-webkit-keyframes fadein {    from { opacity: 0; }    to   { opacity: 1; }}

Snape kills Dumbledore :P

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

 

Without JQuery you could do something like this:

div.fadeInBox {    -webkit-animation: fadein 2s; /* Safari and Chrome */       -moz-animation: fadein 2s; /* Firefox */        -ms-animation: fadein 2s; /* Internet Explorer */         -o-animation: fadein 2s; /* Opera */            animation: fadein 2s;}@keyframes fadein {    from { opacity: 0; }    to   { opacity: 1; }}/* Firefox */@-moz-keyframes fadein {    from { opacity: 0; }    to   { opacity: 1; }}/* Safari and Chrome */@-webkit-keyframes fadein {    from { opacity: 0; }    to   { opacity: 1; }}

I would Highly consider you to use CSS animation. Check out this for more information: 

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Business Management Student @ University St. Gallen (Switzerland)

HomeServer: i7 4930k - GTX 1070ti - ASUS Rampage IV Gene - 32Gb Ram

Laptop: MacBook Pro Retina 15" 2018

Operating Systems (Virtualised using VMware): Windows Pro 10, Cent OS 7

Occupation: Software Engineer

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×