Photoshop Question posted in
The official user guide can be found here.

Load width transition when page gets to certain point in scroll? – Photoshop

I’m trying to trigger an animation through when the page is scrolled to a certain point. Here’s what I have so far (Codepen version):

$(window).scroll(function () {
	var hT = $('#photoshop').offset().top,
		hH = $('#photoshop').outerHeight(),
		wH = $(window).height(),
		wS = $(this).scrollTop();
	console.log((hT - wH), wS);
	if (wS > (hT + hH - wH)) {
		// I need the CSS to happen here, so it happens when the page is scrolled to "photoshop". //
	}
});
body {
  background-color: black;
}

#photoshop {
  font-family: 'Roboto', sans-serif;
  color: #FF5444;
  text-align: left;
  background-color: transparent;
  width: 20%;
  margin-left: 24%;
  margin-bottom: 3px;
  padding: 2px;
  margin-top: 10px;
  padding-left: 3px;
  font-size: 80%;
}
/* this is what I need to happen when the page is scrolled to id="photoshop"

#photoshop {
  width: 40%;
  background-color: #134;
  transition: ease-in 400ms;
  -moz-transition: ease-in 400ms;
  -webkit-transition: ease-in 400ms;
  transition-delay: 200ms;
}

*/
.percent {
  display: inline;
  color: #fff;
  margin-right: 3px;
  font-size: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="photoshop">
				<div class="percent">80%</div> photoshop
			</div>
</body>

I’ve tried doing a get element by ID function, but it won’t load the css when I need it to. I don’t know much about JavaScript and would like to do this with as little scripting as possible. Is there a way to change CSS after the if (wS > (hT + hH - wH)) { line?

Tags:

2

Answers


  1. 0

    You can use the jquery .css() function (see docs). It takes a json object with the css properties and values you wish to apply. So you would do something like this:

    if (wS > (hT + hH - wH)) {
    $('#photoshop').css({
        'width': '40%',
        'background-color': '#134',
        'transition': 'ease-in 400ms',
        '-moz-transition': 'ease-in 400ms',
        '-webkit-transition': 'ease-in 400ms',
        'transition-delay': '200ms',
    });
}
    Login or Signup to reply.
  2. 0

    Try the below,

    You can use jQuery addClass method,

    Just create a new class using css and apply that class using addClass method when the div is visible in the viewport

    $(window).scroll(function() {
  var hT = $('#photoshop').offset().top,
    hH = $('#photoshop').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
  console.log((hT - wH), wS);
  if (wS > (hT + hH - wH)) {
    $('#photoshop').addClass("photoshop_trans");
  }
});
    body {
  background-color: black;
}
.dummy {
  height: 500px;
}
#photoshop {
  font-family: 'Roboto', sans-serif;
  color: #FF5444;
  text-align: left;
  background-color: transparent;
  width: 20%;
  margin-left: 24%;
  margin-bottom: 3px;
  padding: 2px;
  margin-top: 10px;
  padding-left: 3px;
  font-size: 80%;
}
/* this is what I need to happen when the page is scrolled to id="photoshop" */

#photoshop.photoshop_trans {
  width: 40%;
  background-color: #134;
  transition: ease-in 400ms;
  -moz-transition: ease-in 400ms;
  -webkit-transition: ease-in 400ms;
  transition-delay: 200ms;
}
.percent {
  display: inline;
  color: #fff;
  margin-right: 3px;
  font-size: 80%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="dummy"></div>
  <div id="photoshop">
    <div class="percent">80%</div>photoshop
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search