Streaming live at 10am (PST)

Pageinteractive.pl - brand new webiste


#1

Hello guys. I've just wanna to share with you our lates project

Please take a look www.pageinteractive.pl and let us know what do you think

English version: http://www.google.com/translate?hl=en&ie=UTF8&sl=pl&tl=en&u=http%3A%2F%2Fwww.pageinteractive.pl%2F


#2

It started with the loud 'clunk!' of my jaw hitting the desk and ended with having to wipe the drool off my chin. Beautiful, beautiful work!


#3

Stunning! I love the colours, the background fractal type image is fantastic. Good job!


#4

I like everything about it. Color, use of pictures, buttons--awesome job!


#5

I love it too! Really really love the headings with the underline that is thick under the word and slim under the rest of the container (I also love the fractal backgrounds).

Looks fantastic smile


#6

Great job! Very clean, great color and graphics.

I'm looking for a way to incorporate that "paralax" scrolling effect over different backgrounds just has you applied here.

Can you share how you achieved that?

Thanks!


#7

Hi Nita

Check this link enter link description here I'vemade for you simple demo.

  1. You need to add section, Add class named "Concent BG"
  2. You need to make 2-3 more section and then you adding again class "Content BG" plus you adding for second another class "Two", for another "Three" etc.

so it will looks like this

1 section class - Concent BG
2 section class - Concent BG, Two
3 section class - Concent BG, Three, etc.

Then you need to add to all img backgroud and height fot sections (ex. 400px) with this settings

Upload first photo and add.
width: auto, height: auto
Cover: ON
Title: X
Fixed: ON

Have fun smile


#8

Or ..... > Dashboard > Template "One". It's got parallax-ish sections already. > make a parallax section a Symbol > drag Parallax sections into your site anywhere you want them!


#9

@FutureCompost: Thanks, I'll explore the template and try to mix with it.

@sasqik: Thank you! I really wanted to understand the logic behind it, so that I could apply it to my own designs. The demo is great. Can you let it live for a few days so that I can give it a try?


#10

Great help! I've managed to implement it!

Here is the result on the first website I've ever made (still a work in progress):
https://webflow.com/design/jesusnoivo?preview=59fac5b18cc355d248efac77195a9d08

The only thing is that I'm having an issue with the slider transitions overlaping the content BG backgrounds, but already asked help in a new topic for that matter.

Thanks again for your help!


Slider transitions over other brackgrounds
#11

Congratulations - nice job!


#12

http://paralaxdemo.webflow.com/

P.s. Great job smile


#13

I'm sorry, but none of those are parallax... This is parallax: http://matthew.wagerfield.com/parallax/

And this is parallax within Webflow: http://parallax-test.webflow.com/


#14

Hi bartekkustra,
Thanks for the correction. I'm here for the knowledge and for sharing information, so I appreciate the correction.

Even so, the effect I was looking for was the one made by sasqik on his fantastic demo and I finally achieved it, so I'm happy with that for now.

Your parallax example is great: http://matthew.wagerfield.com/parallax/

Maybe as you are an expert with coding, a tutorial for would be nice?

Sorry for the offtopic.

This page was all about this site: http://www.pageinteractive.pl/, which by the way, parallax or no parallax is a great job.


#15

Hey Bart,

Hope your well my friend.

Would you be kind enough to share how you acheived the above parallax effect?


#16

Hello :) I'm very good, thank you!

This is the website in Webflow and this is the code ;)
https://webflow.com/design/parallax-test?preview=92150ff9eec1a7bf7fede7eb25020bd6

<script>
    $(window).scroll(function() {
        $('.iphone').css({
            'top'   :   $(window).scrollTop()*0.2-120
        })
        $('#slow').css({
            'top'   :   $(window).scrollTop()*0.4-78
        });
    });
</script>

#17

Thanks Bart!

I am finally back on my website, Yeah!

Can you make the parallaxing element fade based on it's position with this code?


#18

What do you mean by fade based on it's position with this code?


#19

Sorry, kinda like the text boxes here (when you scroll):

http://themeforest.net/item/fade-responsive-parallax-bootstrap-theme/full_screen_preview/5379808

This is a bad example, but I guess another way to describe it would be to gradually effect an images opacity as it scrolls in, rather than just a fade being triggered.


#20

The opacity can be calculated based on the distance from a proper point.

500px — 1 (opacity)
currentScroll px — X

X = 100% x currentScroll/500px

This can easily create script:

$(window).scroll(function() {
  $('.your-image-class').css('opacity', 1*$(window).scrollTop()/500);
});

God, I love Math :D