Skip to content

Instantly share code, notes, and snippets.

@kizu

kizu/dabblet.css

Created May 31, 2013 13:40
Download ZIP

Revisions

  1. kizu revised this gist Oct 10, 2013. 2 changed files with 3 additions and 1 deletion.
    2 changes: 2 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -50,4 +50,6 @@
    margin: 60px auto;
    width: 20em;
    background: #FFF;
    transform: translateZ(0);
    border-radius: 0px;
    }
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  2. kizu revised this gist May 31, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@ window.onscroll = function (e) {

    // Need to use proper prefix for current browser,
    // and margin-top for browsers which don't support transforms
    var newStyle = '-webkit-transform:translate(0,-' + Math.floor(10*top/availableHeight*40)/10 +'px) translateZ(0)';
    var newStyle = '-webkit-transform:translate(0,-' + Math.floor(10*top/availableHeight*possibleOffset)/10 +'px) translateZ(0)';
    if (newStyle != oldStyle) {
    Parallax.setAttribute('style', newStyle);
    oldStyle = newStyle;
  3. kizu revised this gist May 31, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@ window.onscroll = function (e) {

    // Need to use proper prefix for current browser,
    // and margin-top for browsers which don't support transforms
    var newStyle = '-webkit-transform:translate(0,-' + Math.floor(10*top/availableHeight*40)/10 +'px)';
    var newStyle = '-webkit-transform:translate(0,-' + Math.floor(10*top/availableHeight*40)/10 +'px) translateZ(0)';
    if (newStyle != oldStyle) {
    Parallax.setAttribute('style', newStyle);
    oldStyle = newStyle;
  4. kizu revised this gist May 31, 2013. 2 changed files with 1 addition and 2 deletions.
    1 change: 0 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,4 @@
    /* Proper parallax fixed background */

    .bg {
    position: fixed;
    z-index: -1;
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
  5. kizu revised this gist May 31, 2013. 2 changed files with 4 additions and 2 deletions.
    4 changes: 3 additions & 1 deletion dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,10 +6,12 @@ var oldStyle = '';
    window.onscroll = function (e) {
    var top = (doc && doc.scrollTop || body && body.scrollTop || 0);
    var availableHeight = doc.scrollHeight - doc.clientHeight;

    // Need to use proper prefix for current browser,
    // and margin-top for browsers which don't support transforms
    var newStyle = '-webkit-transform:translate(0,-' + Math.floor(10*top/availableHeight*40)/10 +'px)';
    if (newStyle != oldStyle) {
    Parallax.setAttribute('style', newStyle);
    oldStyle = newStyle;
    console.log('lol');
    }
    }
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  6. kizu revised this gist May 31, 2013. 2 changed files with 27 additions and 2 deletions.
    27 changes: 26 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -16,11 +16,36 @@
    right: 0;
    left: 0;
    bottom: -40px;
    background: url(http://placekitten.com/1260/344);
    background-position: 50% 50%;
    transform: translate(0,0);
    }

    @media (min-width: 0), (min-height: 0) {
    .bg__inner {
    background-image: url(http://placekitten.com/1024/768);
    }
    }
    @media (min-width: 1025px), (min-height: 769px) {
    .bg__inner {
    background-image: url(http://placekitten.com/1280/960);
    }
    }
    @media (min-width: 1281px), (min-height: 961px) {
    .bg__inner {
    background-image: url(http://placekitten.com/1440/1080);
    }
    }
    @media (min-width: 1441px), (min-height: 1081px) {
    .bg__inner {
    background-image: url(http://placekitten.com/1680/1260);
    }
    }
    @media (min-width: 1681px), (min-height: 1261px) {
    .bg__inner {
    background-image: url(http://placekitten.com/1920/1440);
    }
    }


    .text {
    margin: 60px auto;
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
  7. kizu created this gist May 31, 2013.
    29 changes: 29 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    /* Proper parallax fixed background */

    .bg {
    position: fixed;
    z-index: -1;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow: hidden;
    }

    .bg__inner {
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    bottom: -40px;
    background: url(http://placekitten.com/1260/344);
    background-position: 50% 50%;
    transform: translate(0,0);
    }


    .text {
    margin: 60px auto;
    width: 20em;
    background: #FFF;
    }
    72 changes: 72 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    <div class="bg">
    <div class="bg__inner" id="Parallax"></div>
    </div>
    <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    15 changes: 15 additions & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    var doc = document.documentElement, body = document.body;
    var possibleOffset = 40;
    var Parallax = document.getElementById('Parallax');
    var oldStyle = '';

    window.onscroll = function (e) {
    var top = (doc && doc.scrollTop || body && body.scrollTop || 0);
    var availableHeight = doc.scrollHeight - doc.clientHeight;
    var newStyle = '-webkit-transform:translate(0,-' + Math.floor(10*top/availableHeight*40)/10 +'px)';
    if (newStyle != oldStyle) {
    Parallax.setAttribute('style', newStyle);
    oldStyle = newStyle;
    console.log('lol');
    }
    }
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}