[Pro] How is this done?

Freeway
1

does anyone know how this is done? as you scroll down the page the top image blurs. Is this part of a parallax script?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hi Matt,
Although you can now do this sort of thing in cutting-edge browsers with CSS* this example uses two divs, each with a background image (one regular image and one blurred) and a script that fades between the two when the user scroll down the page.
Regards,
Tim.

On 11 Sep 2014, at 20:59, Matt wrote:

does anyone know how this is done? as you scroll down the page the top image blurs. Is this part of a parallax script?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

I’ve currently stripped down the source code to this, and it still works.

<!DOCTYPE html>

<html>

<head>

<link data-turbolinks-track="true" href="https://d32tr43dap9so.cloudfront.net/assets/application-de8db50e7fadbffc12ebc1ac162ec333.css" media="all" rel="stylesheet">
    
</head>

<body data-hook='body'>

    <div class='container has-super-header' id='container'>
		
        <div id='content'>

            <div class='hp-hero'>
            
                <div class='hp-images'>
                
                    <div class='hp-image-full'></div>

                    <div class='hp-image-blur' style='display:none'></div>

                </div> <!-- end hp-images -->
                
            </div> <!-- end hp-hero -->
            
		</div> <!-- end content -->
		
    </div> <!-- end container -->

	<script data-turbolinks-track="true" src="https://d32tr43dap9so.cloudfront.net/assets/application-ed88c1da2e889105c8ab275e9aed7876.js"></script>
	<script>new Casper.Views.Homepage({el: $("body")});</script>

</body>

</html>

You’ll need the 2 scripts before and the (compiled?) css file in order to work. I’ll continue fiddling and deleting items in order to determine what finally wil be the files needed for this effect to work properly in Freeway … unless some other dude comes first :slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Thank you both for getting back will have a go at weekend putting something together.

Richard if you do manage a freeway friendly version would be great to see.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Working on it … I’ll try to squeeze it in :slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options