Twitter Bootstrap Question posted in

Javascript altering the absolute position of an html element-Twitter bootstrap

I am creating a new site, and as you’ll see in the code below I have put two classes (logo & text) above a background fixed position image. I have put them over the top of the image using position absolute with left 50%, top 50% and transform: translate(-50%, -50%); this worked fine with no problems and was responsive the way I had hoped for.

But, as soon as I added my JS code (fade_effect) to the site it moved the position of the two elements (logo & text) slightly. Can someone please help me, have edited the code a number of times and researched it but cannot find a solution. I believe it may have something to do with the JS code section .offset() after what I’ve read, this seem like the part of the JS code that would be effecting the position of these elements. Please see code below:

HTML:

<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />

<body style="height: 2000px; margin: 0; padding: 0;">

<div class="img_slide">
  <h1 class="logo fade_effect">Logo Here</h1>
    <p class="text fade_effect">Welcome to My Site</p>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS:

/** Background image code BELOW **/
.img_slide {
height: 800px;
width: 100%;
background-image: linear-gradient(150deg, rgba(68, 0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
background-repeat: no-repeat;
background-position: 0%, 0%, 50%, 50%;
background-attachment: scroll, fixed;
background-size: auto, cover;  
}
/** Background image code ABOVE **/


.logo {
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 60px;
color: white;
padding: 25px;
border: 3px solid white;
/* position absolute - center */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}

.text {

color: white; 
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 25px;
padding: 10px;
/* position absolute - center */
position: absolute;
left: 50%;
top: 70%;
transform: translate(-50%, -50%);

}



/** CSS code called by the JS .addClass **/

.fade_effect {

opacity: 0; 

}

.FadeIn {
-webkit-animation: slideIn 0.8s ease 0.3s forwards;
animation: slideIn 0.8s ease 0.3s forwards;
}

@-webkit-keyframes slideIn {
0%{
    -webkit-transform: translateY(40px);
    opacity: 0;
}
100% {
    -webkit-transform: translateY(0px);
    opacity: 1;
}

}


@keyframes slideIn {
0% {
    -webkit-transform: translateY(40px);
    opacity: 0;
}
100% {
    -webkit-transform: translateY(0px);
    opacity: 1;
}
} 

/** CSS code called by the JS .addClass **/

Javascript:

var $fade =  $(".fade_effect"); //Calling the class in HTML

$(window).scroll(function () { //Using the scroll global variable
$fade.each(function () {

    fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
    windowBottom = $(window).scrollTop() + $(window).height();

    if (fadeMiddle < windowBottom) {
      $(this).addClass("FadeIn");
    }
    });
});

/* On Load: Trigger Scroll Once*/
$(window).scroll();

This can also be seen online via my CodePen page: https://codepen.io/billyfarroll/pen/qYWYYV

Tags:

2

Answers


  1. 0

    If I’m understanding your question correctly, just wrap the logo and text elements in a div, and position it where you want. 

    <div class="logoContainer">
  <h1 class="logo fade_effect">Logo Here</h1>
  <p class="text fade_effect">Welcome to My Site</p>
<div>

    CSS:

    .logoContainer {
  color: white;
  padding: 0 20px;
  border: 3px solid white;
  position: absolute;
  left: 50%;
  top: 50%;
}
.logo {
  font-size: 60px;
  text-align: center;
}
.text {
  font-size: 25px;
 }

    JSbin if you need it: http://jsbin.com/xerezohabo/edit?output

    Login or Signup to reply.
  2. 0

    Please see the below code:

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" />
        <style>
            /** Background image code BELOW **/
            .img_slide {
                height: 800px;
                width: 100%;
                background-image: linear-gradient(150deg, rgba(68,
                    0, 139, 0.7), rgba(47, 0, 120, 0.6) 10%, rgba(27, 57, 129, 0.5) 30%, rgba(41, 123, 192, 0.5) 50%, rgba(114, 240, 255, 0.6) 86%, rgba(84, 183, 249, 0.7)), url("http://www.strawberryproofing.co.uk/images/nature_large1.png");
                background-repeat: no-repeat;
                background-position: 0%, 0%, 50%, 50%;
                background-attachment: scroll, fixed;
                background-size: auto, cover;
            }
            /** Background
            image code ABOVE **/
            .logocontainer {
                color: white;
                padding: 0 20px;
                border: 3px solid white;
                position: absolute;
                left: 50%;
                top: 50%;
            }
            .logo {
                font-family: 'Raleway', sans-serif;
                font-weight: normal;
                font-size: 60px;
                color: white;
                padding: 25px;
                text-align: center;
            }
            .text {
                color: white;
                font-family: 'Raleway', sans-serif;
                font-weight: normal;
                font-size: 25px;
                padding: 10px;
                /* position absolute - center */
                position: absolute;
                left: 50%;
                top: 70%;
                /* transform: translate(-50%, -50%); */
            }
            /** CSS
            code called by the JS .addClass **/
            .fade_effect {
                opacity: 0;
            }
            .FadeIn {
                -webkit-animation: slideIn 0.8s ease 0.3s forwards;
                animation: slideIn 0.8s ease 0.3s forwards;
            }
            @-webkit-keyframes slideIn {
                0% {
                    -webkit-transform: translate(0, 40px);
                    opacity: 0;
                }
                100% {
                    -webkit-transform: translate(-50%, -50%);
                    opacity: 1;
                }
            }
            @keyframes slideIn {
                0% {
                    -webkit-transform: translate(0, 40px);
                    opacity: 0;
                }
                100% {
                    -webkit-transform: translate(-50%, -50%);
                    opacity: 1;
                }
            }
            /** CSS code called by the JS .addClass **/
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body style="height: 2000px; margin: 0; padding: 0;">
        <div class="img_slide">
            <div class="logocontainer fade_effect">
                <h1 class="logo">
                    Logo Here
                </h1>
                <p class="text fade_effect">
                    Welcome to My Site
                </p>
            </div>
        </div>
        <script>
            var $fade = $(".fade_effect");
            //Calling the class in HTML 
            $(window).scroll(function () {
                //Using the scroll global variable
                $fade.each(function () {
                    fadeMiddle = $(this).offset().top + (0.4 * $(this).height());
                    windowBottom = $(window).scrollTop() + $(window).height();
                    if (fadeMiddle < windowBottom) {
                        $(this).addClass("FadeIn");
                    }
                }
                          );
            }
                            );
            /* On Load: Trigger Scroll Once*/
            $(window).scroll();
        </script>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search