I found this codepen of a smooth scrolling effect using a combination of both js and css. I've been trying to find a way to duplicate this using only pure css and tailwind. Is it possible to do it only using pure css or tailwind?
examples:
https://codepen.io/origine/pen/gvpWRY
or
https://www.korupartners.com
const body = document.body,
jsScroll = document.getElementsByClassName('js-scroll')[0],
height = jsScroll.getBoundingClientRect().height - 1,
speed = 0.05
var offset = 0
body.style.height = Math.floor(height) + "px"
function smoothScroll() {
offset += (window.pageYOffset - offset) * speed
var scroll = "translateY(-" + offset + "px) translateZ(0)"
jsScroll.style.transform = scroll
raf = requestAnimationFrame(smoothScroll)
}
smoothScroll()
I tried searching for smooth scrolling effects but they all refer to the on-click section scroll type, not the literal on scroll ease effect.
Related
I have elements which have a set height of 100% viewport height. Inside of these are a background image which is also fixed to the same height - so the image's top and bottom are always visible, it's centered, and sometimes it's edges get cut off.
What I'm trying to add on top of this is another element which matches the same behavior of the background image (to place other things over the image, but ensure they always line up).
I have a working example using Javascript, but wondering if this same behavior could be replicated with CSS. The pinkish box is the element which I am scaling based on the viewport's size and it should always match up with the background image behind it.
https://jsfiddle.net/louiswalch/p1rkohzt/
And all the scaling logic is as follows:
var $window = $(window);
var base_width = 1600;
var base_height = 960;
var base_ratio = (base_width / base_height);
var contents = $('SECTION .content');
$window.on('resize', function() {
var window_width = $window.width();
var window_height = $window.height();
var window_ratio = (window_height / window_height);
var scaled_width = (window_height * 100/base_height) * base_width/100;
contents.css({
width: (scaled_width+'px'),
height: (window_height+'px'),
marginLeft: ('-'+scaled_width/2+'px'),
});
}).trigger('resize');
I wonder how can I use css/javascript to adjust the blinking cursor inside the search box with CSS?
Is it possible to replace default blinkig caret to horizontal blinking icon
I don't think it is so hard. I made a quick example, which works in most modern browsers except Safari.
It draws the caret on a canvas, and sets it as a background of the input, on a position calculated from the browsers caret position.
It checks if the browser supports the caret-color css property, and if it doesn't it doesn't do anything, because both the system caret, and our caret will be visible in the same time. From the browsers I tested, only Safari doesn't support it.
$("input").on('change blur mouseup focus keydown keyup', function(evt) {
var $el = $(evt.target);
//check if the carret can be hidden
//AFAIK from the modern mainstream browsers
//only Safari doesn't support caret-color
if (!$el.css("caret-color")) return;
var caretIndex = $el[0].selectionStart;
var textBeforeCarret = $el.val().substring(0, caretIndex);
var bgr = getBackgroundStyle($el, textBeforeCarret);
$el.css("background", bgr);
clearInterval(window.blinkInterval);
//just an examplethis should be in a module scope, not on window level
window.blinkInterval = setInterval(blink, 600);
})
function blink() {
$("input").each((index, el) => {
var $el = $(el);
if ($el.css("background-blend-mode") != "normal") {
$el.css("background-blend-mode", "normal");
} else {
$el.css("background-blend-mode", "color-burn");
}
});
}
function getBackgroundStyle($el, text) {
var fontSize = $el.css("font-size");
var fontFamily = $el.css("font-family");
var font = fontSize + " " + fontFamily;
var canvas = $el.data("carretCanvas");
//cache the canvas for performance reasons
//it is a good idea to invalidate if the input size changes because of the browser text resize/zoom)
if (canvas == null) {
canvas = document.createElement("canvas");
$el.data("carretCanvas", canvas);
var ctx = canvas.getContext("2d");
ctx.font = font;
ctx.strokeStyle = $el.css("color");
ctx.lineWidth = Math.ceil(parseInt(fontSize) / 5);
ctx.beginPath();
ctx.moveTo(0, 0);
//aproximate width of the caret
ctx.lineTo(parseInt(fontSize) / 2, 0);
ctx.stroke();
}
var offsetLeft = canvas.getContext("2d").measureText(text).width + parseInt($el.css("padding-left"));
return "#fff url(" + canvas.toDataURL() + ") no-repeat " +
(offsetLeft - $el.scrollLeft()) + "px " +
($el.height() + parseInt($el.css("padding-top"))) + "px";
}
input {
caret-color: transparent;
padding: 3px;
font-size: 15px;
color: #2795EE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
If there is interest, I can clean it a bit and wrap it in a jQuery plugin.
Edit: forgot about the blinking, so I added it. A better way will be to add it as css animation, in this case the caret should be in a separate html element positioned over the input.
Changing the color of the caret is supported by the latest standards. But not changing its width is not, which I think is a shame because it is a question of accessibility for vision-impaired people.
One approach for implementing such a change yourself is first trying to figure out what is the position the caret is blinking at, then overlaying it with an element that looks like the caret but is perhaps wider etc.
Here's an article on how to go about doing such a thing. It's a good article but the end-solution is kind of complicated as a whole. But see if it solves your problem:
https://medium.com/#jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
Here is perhaps a simpler explanation for how to find the care x-y position:
How do I get the (x, y) pixel coordinates of the caret in text boxes?
I'm wondering if it's possible to use only CSS to create a parallax scrolling background that meets the following specifications.
It works on an element that sits inside an otherwise static layout (i.e. my whole page layout isn't a group of parallaxing items)
The background isn't entirely fixed in place; it moves, just not as fast as the rest of the page.
I've looked up tons of tutorials for parallaxing backgrounds, and have found some seemingly great tutorials, but they all have one of the following problems.
They rely on the whole page being a parallax group so that you're actually scrolling over a container via an "overflow: auto" specification
The background is totally fixed in place
they use JavaScript.
Sooo, I can accomplish what I want with JavaScript fairly easily. Here's a full working example on JSFiddle that you can try out.
CSS
.parallax-row {
background-image: url(http://lorempixel.com/output/nature-q-c-781-324-3.jpg);
background-size: auto 150%;
}
JavaScript
/**
* Update the parallaxing background img to partially scroll
*/
jQuery(document).ready(function($) {
$(window).on('scroll', function() {
$('.parallax-row').each(function(index, el) {
var $el = $(el);
var fromTop = $el.offset().top + ($el.outerHeight() / 2) - $(window).scrollTop();
var windowHeight = $(window).height();
var percent = (fromTop * 100 / windowHeight);
$el.css('background-position', '0 ' + percent + '%');
});
});
});
Is it possible to accomplish that same effect with just CSS?
This is for a single page, with a navbar that links to local anchors only.
The navbar comes after a header, but sticks to top when scrolling down.
You can see how it works on github pages
But I've got two offset problems with link/anchors:
as long as you don't scroll, the anchors are offset and masked by the navbar.
once the navbar is affixed, the following links work as intended but not the first one.
A body margin breaks the layout as it prevents the header from beginning right at the top:
body {
margin-top: 65px;
}
I've tried without success to play with margin/padding for the sections:
section {
padding-top: 65px;
margin-top: -65px;
}
Here are the html and css
Any idea how to fix that?
Can it be solved with pure css?
Or do I need some js fix to account for the affix?
I think your problem has only to do with the affix. I found a problem in 3 situations:
no scroll and clicking a link
click the first link
scoll, click the first link and click an other link.
In this three situation you click from an position where you affix is not applied to a position where your affix has been applied.
What happens your click scrolls the target anchor to the top of the page and applies the affix (set navbar's position to fixed) after this. Result the navbar overlaps the content.
I don't think you could fix this with css only. I think your solution of adding a margin / padding to the section will be right, but you will have to apply the margin after the affix.
I tried something like:
var tmp = $.fn.affix.Constructor.prototype.checkPosition;
var i = 0;
var correct = false
$.fn.affix.Constructor.prototype.checkPosition = function () {
$('#content').css('margin-top','0');
tmp.call(this);
if(i%2!=0 && $(window).scrollTop()<443){correct=true}
if(i%2==0 && correct){$('#content').css('margin-top','83px').trigger('create'); correct=false}
i++;
}
This feels to complex and also only seems to work on firefox now.
update
I think i could fix your problem by overwritting the complete affix checkPosition function:
$.fn.affix.Constructor.prototype.checkPosition = function ()
{
if (!this.$element.is(':visible')) return
var scrollHeight = $(document).height()
var scrollTop = this.$window.scrollTop()
var position = this.$element.offset()
var offset = this.options.offset
var offsetTop = offset.top
var offsetBottom = offset.bottom
if(scrollTop==378)
{
this.$window.scrollTop('463');
scrollTop==463;
}
if (typeof offset != 'object') offsetBottom = offsetTop = offset
if (typeof offsetTop == 'function') offsetTop = offset.top()
if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
var affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? false :
offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
offsetTop != null && (scrollTop <= offsetTop) ? 'top' : false
console.log(scrollTop + ':' + offsetTop);
if(scrollTop > offsetTop) {$('#content').css('margin-top','83px'); console.log('margin') }
else{$('#content').css('margin-top','0');}
if (this.affixed === affix) return
if (this.unpin) this.$element.css('top', '')
this.affixed = affix
this.unpin = affix == 'bottom' ? position.top - scrollTop : null
this.$element.removeClass('affix affix-top affix-bottom').addClass('affix' + (affix ? '-' + affix : ''))
if (affix == 'bottom') {
this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
}
}
Some values are hard coded (now) so this function only will work for your example on github pages.
Demo: http://bootply.com/81336
On github pages you use "old" versions of jQuery and Bootstrap. You don't need to set an offset for the scrollspy. You don't have to call $('#navbar').scrollspy(); also cause you already set the scrollspy with data attributes.
See also: https://github.com/twbs/bootstrap/issues/10670
remove this hardcode values
When clicking an internal link (start with #{id}) the anchor with id={id} will be scrolled to the top of the viewport.
In this case there will be a fixed navbar (affix) so the anchor should scroll to the top minus the height of the navbar.
The height of the navbar will be 85px (63 pixels of the brand image + 2 pixels of the border + the margin-bottom of 20 px of the .navbarheader)
This value will be used here:
if(scrollTop > offsetTop) {$('#content').css('margin-top','83px'); console.log('margin') }
else{$('#content').css('margin-top','0');}
I have used 83 (may look better?).
So the 83 can be replaced with: var navbarheight = $('#nav').innerHeight()
Then we have these:
if(scrollTop==378)
{
this.$window.scrollTop('463');
scrollTop==463;//typo?? make no sense
}
The (first) link scrolls the anchor to the top where the affix is not
applied yet (below data-offset-top="443") the height of your fixed
navbar is not used in calculacting so this point will be 443 - 85
(navbarheight) = 378. This code could be replace with.
if(scrollTop==(443-navbarheight))
{
this.$window.scrollTop(scrollTop+navbarheight);
}
Note 443 now still will be hardcoded. It is also hardcoded in your
html with affix-top.
Watch out Replacing the values with the above won't work. The
situation between (af)fixed and not will change for every scroll
action. The part if(scrollTop==378) is a trick not a solution. It
solves the situation for scrollheight < data-offset-top. We could not
apply the whole range, case in that case the user can't never scroll
back to the top (this.$window.scrollTop scrolls him back again and again).
Also the calculation of navbarheight will be tricky. When the navbar
is fixed $('#nav').innerHeight() / height will return 85 (including
the margin). In the absolute position this will be 65.
I have a menu div that I want to slide down so it's always visible, but I want it to be positioned under my title div. I don't want it to move until the top of the menu hits the top of the screen and then stay in place. Basically I want a sliding menu with a maximum height it can slide to.
I think I understand what you're talking about—we used a similar technique on The King with jQuery. Here's how:
///// CONFIGURATION VARIABLES:
var name = "#rightsidebar";
var menu_top_limit = 241;
var menu_top_margin = 20;
var menu_shift_duration = 500;
var menuYloc = null;
///////////////////////////////////
$(window).scroll(function()
{
// Calculate the top offset, adding a limit
offset = menuYloc + $(document).scrollTop() + menu_top_margin;
// Limit the offset to 241 pixels...
// This keeps the menu out of our header area:
if(offset < menu_top_limit)
offset = menu_top_limit;
// Give it the PX for pixels:
offset += "px";
// Animate:
$(name).animate({top:offset},{duration:menu_shift_duration,queue:false});
});
(Hat tip to #soyrex who wrote this code.)
Slashdot does this. Check it out at, for example, http://tech.slashdot.org/tech/08/10/22/1246200.shtml
You may be able to lift the technique from their site.