1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS and HTML

Discussion in 'Web Design' started by supermex, May 23, 2017.

  1. supermex

    supermex Jr. VIP Jr. VIP

    Joined:
    Nov 19, 2016
    Messages:
    660
    Likes Received:
    146
    Gender:
    Male
    Occupation:
    Startup founder & CEO - Studying computer science
    Location:
    Germany
    Hi,
    Is it possible to implement an animated background (found a CSS code for that) into the HTML Head of a website?
     
  2. hpasha

    hpasha Jr. VIP Jr. VIP

    Joined:
    May 15, 2011
    Messages:
    1,381
    Likes Received:
    185
    Location:
    Kepler 186F
    You can do it. But you would need a jquery plugin to do it.
     
  3. amandine

    amandine Registered Member

    Joined:
    Mar 11, 2014
    Messages:
    95
    Likes Received:
    20
  4. supermex

    supermex Jr. VIP Jr. VIP

    Joined:
    Nov 19, 2016
    Messages:
    660
    Likes Received:
    146
    Gender:
    Male
    Occupation:
    Startup founder & CEO - Studying computer science
    Location:
    Germany
    jQuery is already active by default in my web hosting service. This is what I want to implement: https://codepen.io/MarcoGuglielmelli/pen/lLCxy I am just not able to implement this stuff in the HTML head (no experience with CSS etc...)
     
  5. amandine

    amandine Registered Member

    Joined:
    Mar 11, 2014
    Messages:
    95
    Likes Received:
    20
    • Thanks Thanks x 1
  6. supermex

    supermex Jr. VIP Jr. VIP

    Joined:
    Nov 19, 2016
    Messages:
    660
    Likes Received:
    146
    Gender:
    Male
    Occupation:
    Startup founder & CEO - Studying computer science
    Location:
    Germany
  7. amandine

    amandine Registered Member

    Joined:
    Mar 11, 2014
    Messages:
    95
    Likes Received:
    20
    In your html simply put this

    <div id="large-header" class="large-header">
    <canvas id="demo-canvas"></canvas>
    <h1 class="main-title">Connect <span class="thin">Three</span></h1>
    </div>
    In your css file :
    /* Header */
    .large-header {
    position: relative;
    width: 100%;
    background: #333;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
    background-image: url('../img/demo-1-bg.jpg');
    }

    .main-title {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #f9f1e9;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    }

    .main-title {
    text-transform: uppercase;
    font-size: 4.2em;
    letter-spacing: 0.1em;
    }


    .main-title .thin {
    font-weight: 200;
    }

    @media only screen and (max-width : 768px) {
    .main-title
    {
    font-size: 3em;
    }
    }
    and eventually include normalize css file for compatibility

    And as in the demo include js files :

    <script src="js/TweenLite.min.js"></script>
    <script src="js/EasePack.min.js"></script>
    <script src="js/rAF.js"></script>
    <script src="js/demo-1.js"></script>
     
  8. SpoonFeeder

    SpoonFeeder Senior Member

    Joined:
    Mar 19, 2017
    Messages:
    999
    Likes Received:
    813
    Gender:
    Male
    Occupation:
    SpoonFeeding & Babysitting the Noobs.
    Location:
    Click the link below if you're new to BHW!
    Home Page:
    PM me OP. I'll insert that animated background on your website's header section for free.
     
    • Thanks Thanks x 1
  9. supermex

    supermex Jr. VIP Jr. VIP

    Joined:
    Nov 19, 2016
    Messages:
    660
    Likes Received:
    146
    Gender:
    Male
    Occupation:
    Startup founder & CEO - Studying computer science
    Location:
    Germany
    pm sent :)