HTML/CSS/PHP/JS Tutorials, Tricks & Scripts [Updated Feb 8]

Everything related to the visual and coding aspects of websites.
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: HTML/CSS/PHP/JS - Newest: Parallax

Post by Mikari »

I find that the trickiest part is to ensure that the paralax aligns when using it fullscreen since the resolutions are different. You can tell from my experiments that those were made before div example because I was aligning it "by hand" with trial and error before I figured out the math behind it. It's not hard math, I'm just not good at math. XD The div example was the practice I needed to figure out the math behind the alignment. Practice can be enlightening! That's why I've always thought it's a good idea to experiment with codes, even if a "better" version already exists or you're not planning to do anything with that code, it'll still teach you something about the code itself. :D
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: HTML/CSS/PHP/JS - Newest: Parallax

Post by Mikari »

That parallax sequence sounds cute! :D For the layering I've been doing 2 top layers with one bottom layer behind them, grouping the three, then repeating with three more and adding another bottom layer behind the area between the groups. It's also easier if the last layer is in the top, like a footer or just the last part, so you don't have to deal with the empty space that comes from the 3d distance effect.

Writing tutorials can be a long step by step process, figure out how it works, truly understand it, figure out how to communicate your thoughts, it can be challenging at times. The good news is that when you explain something you'll likely end up understanding it better yourself. :D
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: HTML/CSS/PHP/JS - Newest: Parallax

Post by Robin »

Super silly question: what even is parallax? like, what does it even look like in use? I thought I knew and then I started reading through the tuts and it's not what I thought it was... XD
~ a dream is a wish your heart makes ~
withinmyworld.org
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: HTML/CSS/PHP/JS - Newest: Parallax

Post by Mikari »

There are different types of parallax, basically you design in layers that scroll at different speeds and align on top of each other, allowing you to see the later bellow between the sections from the layer above. Normally people use 2 layers but you can have way more. Think of the monitor as a window and someone is holding a paper right in from of it, another person in holding a paper five feet away, but it's a lot bigger so to you they look the same size as they overlap each other. The papers are the layers and the monitor is the window, it all makes sense when you think of it as a 3d window rather than a flat surface.

Rigelatin.net has an effect that scrolls over a picture which stays on the screen (you can also do this without the use of perspective css via positioning tricks). If you're going to make that picture move though, then you'll need perspective css to make it scroll slower than the top layer, it looks this way because it's far away. Before being adjusted for size, the bottom layers looked smaller because they are further back from the surface of the screen.

For example, in this tiny parallax the star background is 900 pixels wide but it fits perfectly into a 300 pixel box because it's further away. Kind of like how you can make it look like you're holding a car in the palm of your hand in a photo if the car is further away behind you. Notice that the star background moves slower... it actually doesn't it's just further away and made larger to look like it's right next to the line layers, it's all a perspective illusion. Here are some examples of CSS 3D effects. Webpages are no longer flat planes! It's it's ok crazy, isn't it? XD
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: HTML/CSS/PHP/JS - Newest: Parallax

Post by Mikari »

There are so many possibilities with CSS3, it's totally awesome and I love it! :D

I don't really have any WordPress experience. I enjoy coding things from scratch and while it can get done in other ways, I don't want to miss out on writing every line of code myself. XD

New Tutorial: CSS Classes A few CSS class tricks...
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: HTML/CSS/PHP/JS - Newest: Parallax

Post by Robin »

Mikari wrote:There are different types of parallax, basically you design in layers that scroll at different speeds and align on top of each other, allowing you to see the later bellow between the sections from the layer above. Normally people use 2 layers but you can have way more. Think of the monitor as a window and someone is holding a paper right in from of it, another person in holding a paper five feet away, but it's a lot bigger so to you they look the same size as they overlap each other. The papers are the layers and the monitor is the window, it all makes sense when you think of it as a 3d window rather than a flat surface.
This is an awesome explanation! YAY <3 I think I understand it better now.
AdriCULOUS wrote:It's amazing how HTML5 and CSS3 can finally do the things that used to be impossible for a beginner before, like animations and 3D effects and everything. I remember how we had to rely on our image editing programs to have those types of effects. Now we can make amazing logos with just using a web-optimized font like the ones in Google Fonts (my logo at Let's Volt IN is a plain brown font converted for the web via FontSquirrel).
THIS SO MUCH. Back in the day I used to labor for hours in Photoshop Elements 2.0 over Javascript image rollovers, and now we can just about achieve the same look with CSS a:hover tricks. So much advancement! Sometimes I'm still stuck in mid-2000s awe over it all... xD
~ a dream is a wish your heart makes ~
withinmyworld.org
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: HTML/CSS/PHP/JS - Newest: Parallax

Post by Mikari »

I'm happy you understand the analogy :D The first step to parallax is thinking in 3D like that ^_^ Once you get used to picturing it like that, the rest becomes a lot easier to understand.

lol yes the JS! I remember using that mouse over effect on an image on a layout years ago and people were like "O.O it changes!" XD
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: HTML/CSS/PHP/JS - Newest: CSS Classes

Post by Mikari »

CSS3 makes so many things easier/possible, it's wonderful! *CSS3 fangirl*
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: HTML/CSS/PHP/JS - Newest: CSS Classes

Post by dubiousdisc »

Just poking in to say: Adri, adulation will bring you everywhere. XD

Jokes aside...actually I hadn't really thought of background-attachment: fixed as a type of parallax, but I suppose that in a very loose sense, it is. There are elements scrolling faster than one element which is not moving at all, so actually I suppose it is the bare minimum level of parallax. I thought the term was more correctly applied to different layers moving at different speeds, though?

Mikari: one little thing about your classes tutorial, though. I know your example was just that, an example, and this is a bit outside the realm of what you were trying to explain, but - it is a better coding practice to avoid class names which are presentational, like in the case of your .bold2 class - because, what if you decide to redo your layout and then you actually decide to style that as, I don't know, red but not bold? Then you end up with code that you can no longer really read. So an even better example would be to have the class name be the logical function of what you want to achieve - in this case, I suppose bold signifies important text, so the class name could be .important or something on that vein. But I personally would avoid making the example with bold and italic since there's already the <b> and the <i> and the <strong> and the <em>, so things might get confusing once you know about those.
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: HTML/CSS/PHP/JS - Newest: CSS Classes

Post by Mikari »

I don't really like using <b> and <i> anymore for one of the reasons you described. You know how sometimes people give the bold or italic text a slightly different color and it compliments the layout colors? I rarely do it, but I use <span class="classnamehere"> just in case I later decide to. XD

It's funny that you should point this out, and I totally see your point, I just found it amusing because someone on Deviant Art suggested the opposite and I was following their suggestion to use "more obvious examples so they're easier to follow." XD Anyway, thanks for feedback, I'm still finding a balance.

Speaking of code that "reads" I only ever used notes in college because they were required and haven't used them since. I can still figure out my own code easily, since I'm so used to it, but notes do have their usefulness in reminding what code does what when you're trying something new.
Post Reply