Wix Design Tutorials: Creating a Multi-Layered Parallax Site
ฝัง
- เผยแพร่เมื่อ 15 ก.ค. 2018
- In this tutorial we’ll show you how to create a multi-layered parallax website with multiple scroll and hover effects, including a color-changing gradient background, static typographic layer, overlapping hover effects, invisible drop shadow, autoplay video, overlapping text and text animation.
This technique is great for: a designer CV or portfolio.
Play with this website: www.wix.com/website-template/...
Wix.com
The Web Is Your Playground
Start Creating: www.wix.com/designers/playground
This is a smart way to design the gradient background! The parallax idea in this video is well-explained. Great tutorial.
I've been looking for this solution for ages. Thanks!
The best Wix tutorial video!
thank you so much for this tutorial! really helps you understand what's possible with parallax.
This is beyond helpful! Thank you!
hover boxes are so cool, I've used them on my site.
Wow......Wow, this was LITERALLY thee best video i've seen in a long time. Definitely keep these videos coming, I would honestly pay you money to teach me these tips and tricks! Awesome video!!!!
@@wixplayground7678 Do you offer consultations on learning tips and tricks
1 on 1? If so i'd be greatly interested!
simply stunning!
This is such a great way to work with parallax effect, but still not working on phone device I suppose...
Warched many videos of this channel and it's definitely helping once you're done with the basics! Thanks quite a lot for helping!
the day wix adds responsiveness its game over
This is next level!! 0_0
Design Level 🔥🔥🔥🔥🔥🔥
WIX - Just GREATE! (Great & create) :)
Hi Wix Playground! Are you planning on making an updated 2022-2023 tutorial?
That is a god mode of wix
Awesome 👍
This is so amazing.. thanks for sharing your work! However can you please do a tutorial on how to create the transparent text png files and also the gradient background.. tried doing it in photoshop but it wasn't nearly as good as yours.
great video! Followup question : Why not use pinned rectangle boxes for the sides of the frame as well? Im curious if there is a reason for this. choice?
Little WARNING This is great for you viewing your website at a resolution of 1920x1080 and everyone else with a screen at the same ratio as yours but once someone else goes on the site with a different screen ratio for example a common one being an Imac which isn't 1920x1080 this effectively renders this effect useless to them. What they see is completely different layout to everything you have placed because of the change in ratio. Just a little warning to anyone wanting to actually have a working site across all computers :)
do you have any solution for that?
Thank You
This is amazing! Unfortunately Wix has changed a lot of things since you made this video and I'm unable to make the slideshow with only 1 sec between slides. The minimum is 3 sec and its definitely not the same look. I made a call into the Wix IT and they have submitted a fix for it but we'll see what happens. Thanks for the awesome ideas!
This should be pinned, this comment was SUPER helpful! Thank you!
@@B_Migs agreed 100%
Wow! Your design skills are truly amazing. Videos like this are so valuable to show what all is capable for newer designers. I had no clue how to do the majority of these. I would love see what you would recommend to a fellow wix "expert" about advanced training like this to learn and hone in on skills. Also, can you give me an additional information about sketch and the other programs you used for the backgrounds and "Playground" layers. I would like to learn how to do that as well.
Sketch is a program used for wireframes, prototyping i.e. UX design. its similar to Adobe PhotoShop but more streamlined for design. you can find a lot of tutorials on youtube about sketch. Im also a new designer and youtube tutorials are my life!
I'm pretty solid with Photoshop, but as you know there's always so much else to learn. Thanks for the feedback Marina.
Thank you so very much, the video is perfect! I created my portfolio site in Mobirise software and exported as plain HTML static site to local drive - is it possible to import this site to Wix?!
When you create the header and footer box and pin it to the screen, how does that not cause problems on smaller screens? Like when it has a slider bar at the bottom because the screen is too small.
I thought when you mess with the pixels like that it doesn't fit the to screen size anymore, causing people with smaller screens to have a slider bar and people with bigger screens to not go across the full width.
Sorry this question may seem confusing, to sum it up how come the pin box adjusts to people screen instead of just being the exact amount of pixels you set it to be?
may we know what the font of the "Playground" text is ? It does look amazing
Thank you
Great wix added "turbo" so its take loading up 25 sec insted of 26 sec
Pra fazer o efeito de texto com o fundo transparente igual ela fez vc precisa criar uma faixa em cima da outra faixa.
When I upload the typographic png I and change the backround it remains with the white backround , any advice ???
how does she add the etxt? from what I see she adds it to the strip but when I do that it just replaces the gradient
This seems like an awesome tutorial but I couldn't get started because I don't know what Sketch is or how to create stuff on it. Is there a tutorial for it? I'm confused.
I tried it with another gradient, but for some reason my gradient seems not continuous and breaks up on WIX (I checked it in Photoshop and it is seamless there) Any idea what can be the settings I'm getting wrong?
what fonts you are used, wix?
Muito obrigada!!! Assisti o vídeo mais de 10 vezes, mas não consigo colocar duas imagens (o fundo colorido e a imagem com fundo transparente- o texto) na mesma faixa. Assim que coloco a imagem do texto em png com fundo transparente aparece, inicialmente, o fundo branco, reduzo a cor de fundo pra 0%, mas o que aparece é a cor do background da página. Vcs podem me ajudar? Muito grata!
How did you slice the image?
I tried doing the seamless background but the colour gradient had obvious white lines in between still, what could I be doing wrong?
Wix : "Currently, parallax scrolling is not supported on mobile devices."
I've been designing my own site with parallax as a key part, only to discover it doesn't work on mobile.
Have voted for the feature, but come on Wix, I thought 'Mobile first' is still the mantra?!!!!!
I just voted too. They need to get their act together with that!
will this translate well on mobile platforms also? great tutroial btw, very helpful
The parrallax effect doesn't work on the mobile virson.
I'm having trouble with the transparent background of the text. I've created it using several different programs but the opacity doesn't change when I add them to the strip.
To overcome this problem you can create the text with the background and upload them as strip background
How do you start with a blank page?
I ‘ve a problem the background where it’s write Playground, is not adjust for all my screen on my different computer. I created one. How I can do for this background was automatically adjust with the screen of my user ? I’m French sorry for my English
Thanks for sharing!!! How would you set this up for the "mobile" version for phones and tablets?
Okay but what does the mobile version look like? Is it all messed dip like on my wix site?
Im new to web design and graphics. Anyone can tell me how she made the color blocks? Thank you
how do you create pages that link to images without using the menu bar
When you said you created a gradient background in "sketch" what are you referring to?
Adobe Sketch the software.
what size is the gradient background before you cut it up?
The width is 1920px and the height is 1080px multiplied by however many color versions you want. (I.e., if you scroll through five different text colors, you'd have 1080*5 which is 5400px. Then you'd crop it into 5 images all sized 1920px by 1080px.)
The final website also features a menu, which seems to be linked from an item to a light box. Do light boxes not work on the mobile version? If not, how can we add a menu? :|
@@wixplayground7678 Gotcha, and the menu I added on the lightbox is not coming through because the mobile version has its own "menu" button. Would you say I need to re do my menu with Text and vector art, link and them to the pages I want. Then hide the default "menu" on mobile?
Thank you, Wix support has been aces in my book :)
This desing scrolling effects won't work on mobile view !
Hi all of your tutorials are really good, but is there any chance that you can make a written tutorial and attach to all of your video tutorials?
Thank you, that would be a really great help. Some of the things just go missing in these tutorials, everything goes very fast.
I'm a novice, so with the speed this tutorial goes at, I can't hit stop, reverse, replay fast enough.
how to create such text???i tried to make it in Photoshop but the results wasn't the same .
Can anyone tell me why I can't switch "How long between the slides"? to 1 second? The mininum is 3 ..
how to create before after slide
How do I make this work for mobile? It seems like when it automatically stacks it doesn't work?
@@wixplayground7678 Absolutely voted for this! Most traffic is mobile based.
can you people make it in mobile and also add a blog design which can look great as same as deign
thank you!! Can I made it in Wordpress with Elementor?
font playground?
For someone wondering what font is used in that typographic layer, it's very close to 'Muzarela Extra-Condensed Bold' ...
It sure looks amazing here but can't really say the same for any other combination of letters.
I believe it's Topanga JNL
Anyone else find that their strip image disappears inconsistently, often after scrolling but up? It's the image that is equivalent to the "playground" image. When the image is missing if I resize the browser it will reappear properly. Any fix for this?
for others: found it very glitchy and buggy in preview, but when I published it and looked at that it worked fine.
😢Anyone knows how to show the floating property window on the right? Can’t find it on today’s Wix.
anyone know the hex codes?
This looks really amazing! Does anybody have any idea where they created the PNG text and background? I'd love to copy something similar for our website! If anybody could help that'd be great :)
0:43 they said it there in ‘Sketch’, but you can use any photo editor software such as Photoshop or Illustrator. Hope this helps
@@liamgreen9787 Thanks so much!
Nice, however.... why not add the gradient as a line one pix wide and have it tile? Isn't there a way to have it repeat horizontally as you would do with html?
My God do you think you could move a little faster when you are moving items around you are just shy of Light Speed
I does not work on mobile
Because it will decrease the site speed that's why this animation or effects doesn't support in mobile
Literally the best design and six tutorial I've seen so far. My website is GrappleHub.net! I'll be implementing a lot I've learned from this video!! Thanks
Maybe this will be useful if Parallax worked on mobiles. Until then... let's hope your site is only seen on desktops
looks so bad on mobile though. who uses desktops anymore?
Everybody who designs digitally, companies, people who games, etc. a LOT of people.
It is not a problem to adjust this to mobile though
Yp you are right and Google even downranks your website if its not optimized for mobile...
And I thought parallax scrolling meant different layers scrolling at different speeds. God I'm stupid.
"Parallax scrolling is a scrolling technique used in computer graphics in which background images move more slowly than images in the foreground, creating the illusion of depth and immersion." - techopedia
What a waste of time... spent whole day messing around with it and it looks great on desctop, but it's a total crap on mobile
Tried Wix or any page builder from Wordpress and all of them offer the capability for your website to be responsive. So basically, every page you create three times; 1. desktop 2.tablet and 3.mobile. I haven't seen a tablet mdoe from Wix though but for mobile you can simply switch by pressing one button. I hope this helps.
Nice for learning, but not responsive. This technique isn't really useful in the real world.
Very cool techniques. Also, horrible design. Blech.