1:http://codepen.io/dudleystorey/pen/yaWzzR
This was made by Dudley Storey
What I like about this right off the bat is that the text disappears behind the mountain the more you go down. Just one look at the first complete of lines of HTML, I used what they did.
My experience in After Effects in trying to create the illusion of a 3D space made me understand what was going on, they must have gotten a single image and imputed it into Photoshop, duplicated it, than had one picture only showing the mountain while the other picture was without that mountain.
That person must have saved the top separately and named them appropriately and than in Sublime they created a 'Sandwich', the letters in the middle of two images, however I have yet ton understand how the header was linked to the Up and down arrows.
The transition is simple and there isn't much coding to be done however it is effective.
Link 2: http://codepen.io/ashfaqamin/pen/dpEZJa
by Ashfaq Amin
I think how the text just shows up, in a floating animation.
I especially like how they are just animating the Text with no need to do any Java script, because I've never understood Java script, I'm sure i'm not the only person who's come across that word before online, especially when it comes to games that run on Java script and you have to download this specially plugin to play it.
Another thing I like about this is the CSS, even though i'm left scratching my head when I try to read just what I'm looking at but there are words familiar enough for me to understand, I get the feeling that what I'm looking at is similar to what happens when you edit a video but if it was wrote down in note form.
I could edit the one whole text, or I could split it up into separate letters and edit each one of them.
Link 3: http://codepen.io/pwsm50/pen/rrgwjN
By Paul Sullivan
What I like is that I can easily do the same thing in a video editor and this person has somehow made the same thing happen without a program doing it all for you. There is no Java script and most of the work is done in CSS and even that is short.
Perhaps I could use this if I'm writing something horror based, I've seen loads of clips that is told by a camera points of view, that is being held by one of the camera's, it was very effective even though there was loads of motion tracking involved and loads of special effects used.
Link 4: http://codepen.io/SirDaev/pen/ORKQON
by Dave Judd
To me this looks like they separated the whole image into sections and than placed an invisible container around it, than added a transition to each strip before having the main image fade over it, prehaps using a flash or fade to do it.
My brain is so used to understanding something from an editors point of view that it will be heard translating it into code, if I learned to do that, than I would be able to do some amazing things that I usually do in Sony Vegas Pro.
Link 5: http://codepen.io/jkantner/pen/zKQkXm
by Jon Kantner
What I find interesting about this, is that two of the skeletons mirror each other while the middle one is clearly doing it's own thing, which makes me believe that the coder somehow managed to duplicate the same skeleton over.
No that's wrong, I've noticed in the HTML tab, there was only really one skeleton which was duplicated over three times and they somehow got two to the same thing while the middle one does the same thing.
To achieve that 'boney' effect, that I've seen in cartoons when a Skeleton comes back to life, they separated the one assets into different parts.
Link 6: http://codepen.io/AmeliaBR/pen/gwydOV
by Amelia Bellamy-Royds
If I were to recreate this than, I would create the circle in Adobe Photoshop, each colour would be it's own assets, and than in a video editor I would create a path for each other to create the movement.
The animation is really precise when it comes to the motion path for each one of them and the rings are clearly separated from their circles.
Link 7: http://codepen.io/Yakudoo/pen/YXxmYR
by Karim Maaloul
This is amazing, I love how it combined 3D and coding, even though I am nearwhere near that stage since I too have yet to master materials and animating my characters, this just blows my mind away.
It makes me have hope that one day, I could be so pro.
Link 8: http://codepen.io/ImagineAlex/pen/pEYPOz
by Sascha Sigl
At first i didn't see the play but now I'm glad I did, pressing it lead me to a neon themed Ping Pong game, what was great was that with the mouse I could move around in a 3D space however I couldn't actually play the game just watch but I was already, beyond impressed with the limited things I could do.
I were to recreate this, I would have done the first page in Sony vegas and than have the next image be of a scene made in Affects and Blender 3D, for the 3D work.
Link 9: http://codepen.io/juliangarnier/pen/idhuG
by Julian Garnier
I am impressed, not only by the transition but there seems to be an animation going on when the mouse is not use, and I get the thought that the plants aren't a background video or movie so that mean's it was created in the program itself using assets.
They used all three for this, HTML, CSS and Java script, I like how they linked one plant with it's own label that followed it around the sun.
Link 10: http://codepen.io/Virtuousquare/pen/jrobrj
by Virtuousquare
This is the last one, I liked this one because it's in a game format, even though there is no instructions, it's still cool to look at.
Although I'm not very fund of horror based games wither 2D or 3D but it's interesting enough to look at.
I'm back from the Christmas holidays and I'm in my first lesson back, we were tasked in showing one HD image on different platforms that will show on different devices.
ANDROID
MOBILE
MACKBOOK PRO
APPLE WATCH
A cry for help.
Css code:
.main-container .{
width:98%;
margin: auto
background-color: pink;
}
.selection-one {
display:flex:;
width: 100%;
}
.secton-one-left {
background-color: red;
height: 600px;
}
.section-one-right{
width: 20px;
background-color: purple;
height: 300px;
}
.html code:
<html>
<head>
<title>Flexbox Demon</title>
<link re="stlesheet" types="text/css"
href="new website/main.css">
</head>
<body>
<div class="selection-one">
<div class="selection-one-left"></div>
</div>
<div class="section-one-right"></div>
<div class="selection-two">
<div class="section-two-left-top">
<div
</body>
</html>
No comments:
Post a Comment