What did I miss to make parallax scrolling working?
<div className="h-screen">
<div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat">
<Image src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80'" objectFit="cover" alt="test" layout="fill" priority={true} />
</div>
</div>
I think instead of Image component you should apply backGroundImage style to the div where you used bg-fixed class.
Parallax scrolling is a web design technique in which the website
background moves at a slower pace than the foreground.
If you visit tailwindcss:
Utilities for controlling how a background image behaves when
scrolling.
<div
className="relative h-full w-full bg-cover bg-center bg-fixed bg-no-repeat"
style={{
backgroundImage: `url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80%27)`,
}}
></div>
I created a component to test it out:
const Test = () => {
return (
<div className="h-screen">
<div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
<div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
<div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
<div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
<div
className="relative h-full w-full bg-cover bg-center bg-fixed bg-no-repeat"
style={{
backgroundImage: `url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80%27)`,
}}
></div>
<div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
<div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
<div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
<div className="p-5 text-2xl bg-purple-300 bg-opacity-50 rounded-xl">
Welcome to my site!
</div>
</div>
);
};
export default Test;
Related
On hover i'm showing an image and content on it. On desktop the image takes the full width of parent. But on mobile screens it doesn't works. Is there a way to fix it ?
<div class="content mt-7">
<h2 class="title text-xl font-semibold">Fitness & Wellness</h2>
<p class="text-slate-400 mt-3">Custom software for fitness and wellness which is much needed professionally and personally.
</p>
</div>
<div class="hidden group-hover:block ">
<div class="absolute inset-0 ">
<img src="./assets/images/services/Fitness 1.jpg" alt="" class="object-cover " >
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black"></div>
</div>
<div class="absolute bottom-0 right-0 left-0 mb-6">
Fitness & Wellness
</div>
</div>
</div>
Here is one code you can try.
<div class="group">
<div class="content mt-7">
<h2 class="title text-xl font-semibold">Fitness & Wellness</h2>
<p class="text-slate-400 mt-3">Custom software for fitness and wellness which
is much needed professionally and personally.
</p>
</div>
<div class="invisible group-hover::visible">
<div class="absolute inset-0 ">
<img src="https://images.unsplash.com/photo-1671726805766-de50e4327182?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="" class="object-cover w-full h-full" >
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black">
</div>
</div>
<div class="absolute bottom-0 right-0 left-0 mb-6">
Fitness & Wellness
</div>
</div>
</div>
Either svelte or tailwind transitions.
This is basically copied from the tailwind components page with some changes to make it work as best as I knew how with svelte. The tailwind component page says it requires JS, but I cannot find any examples of the kind of JS that would be expected in order for it to work the way it does on the component page.
There's a comment block of tailwind classes, but I cannot find docs on how they are to be used.
The side panel works, as in it hides and shows and all the clicks are appropriate, but it snaps. I'd like it to slide in from the side.
How do I make it do a sliding anim/transition?
<aside
class="relative z-10 "
aria-labelledby="slide-over-title"
role="dialog"
aria-modal="true"
class:block={showSidePanel} << my toggle variable in Svelte
class:hidden={!showSidePanel}
on:click|stopPropagation|preventDefault={toggleSidePanel}
transition:fly={{ x: 200, duration: 300 }}
>
<!--
Background backdrop, show/hide based on slide-over state.
Entering: "ease-in-out duration-500"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in-out duration-500"
From: "opacity-100"
To: "opacity-0"
-->
<div
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
class:block={showSidePanel}
class:hidden={!showSidePanel}
/>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-y-0 right-0 mt-20 flex max-w-full pl-10">
<!--
Slide-over panel, show/hide based on slide-over state.
Entering: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-full"
To: "translate-x-0"
Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-0"
To: "translate-x-full"
-->
<div
class="my-auto h-full w-screen max-w-2xl"
on:click|stopPropagation|preventDefault={() => {
// this blocks clicks closing the sidepanel
}}
>
<div
class="m-auto flex h-[95%] flex-col overflow-y-scroll bg-white py-6 shadow-xl"
>
<div class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2
class="text-lg font-medium text-gray-900"
id="slide-over-title"
>
Panel title
</h2>
<div class="ml-3 flex h-7 items-center">
<button
type="button"
class="rounded-md bg-white font-bold text-gray-400 hover:text-gray-500"
on:click|stopPropagation={toggleSidePanel}
>
<span class="sr-only">Close panel</span>
<Icon src={X} theme="solid" class="h-8 w-8 font-bold" />
</button>
</div>
</div>
</div>
<div class="relative mt-6 flex-1 px-4 sm:px-6">
<!-- Replace with your content -->
<div class="absolute inset-0 px-4 sm:px-6">
<div
class="h-full border-2 border-dashed border-gray-200"
aria-hidden="true"
/>
</div>
<!-- /End replace -->
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
Instead of using classes to hide or show your sidebar you should use an {#if} block wrapped around the entire aside element to hide and show the sidebar and overlay.
Then you can use the Svelte transition that is right for each element. In the Tailwind comments it's using translate-x-full for the panel transition to get a similar effect you can bind the clientWidth of the actual panel to a variable and use that as the x amount in your Svelte fly transition.
Something like this (I removed some of your code since you had no components linked and used Tailwind CDN so the Tailwind classes would work like in this REPL):
<script>
import { fly, fade } from 'svelte/transition'
let showSidePanel, width
function toggleSidePanel() {
showSidePanel = !showSidePanel
}
</script>
<svelte:head>
<script src="https://cdn.tailwindcss.com"></script>
</svelte:head>
<div>
<button class="p-3" on:click={toggleSidePanel}>
Show side panel
</button>
</div>
{#if showSidePanel}
<aside class="relative z-10">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" transition:fade/>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-y-0 right-0 mt-20 flex max-w-full pl-10">
<div class="my-auto h-full w-screen max-w-2xl">
<div bind:clientWidth={width} transition:fly={{ x: width }} class="m-auto flex h-[95%] flex-col overflow-y-scroll bg-white py-6 shadow-xl">
<div class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2 class="text-lg font-medium text-gray-900">
Panel title
</h2>
<div class="ml-3 flex h-7 items-center">
<button class="rounded-md bg-white font-bold text-gray-400 hover:text-gray-500" on:click={toggleSidePanel}>
close
</button>
</div>
</div>
</div>
<div class="relative mt-6 flex-1 px-4 sm:px-6">
<div class="absolute inset-0 px-4 sm:px-6">
<div class="h-full border-2 border-dashed border-gray-200" aria-hidden="true">Some content</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
{/if}
I am trying to create a homepage that has two columns, one with text and another with a carousel of images.On web view, the layout looks great, but on mobile view, the images are compressed leaving a lot of space around. I have tried setting the image height to full with h-full which doesn't work. How can i make the image occupy the full grid height on mobile view as well? Any recommendations / references will be appreciated.
My code :
<section className="p-9">
<div className="min-h-screen grid grid-cols-1 sm:grid-cols-2 md:grid-cols-8 lg:grid-cols-8 items-center pt-9">
<div className="col-span-2">
<p className="font-bold text-4xl mb-4 ml-4">
A construction <span className="text-red-600">ecosystem</span> that is
simple, transparent and <span className="text-red-600">efficient</span>
</p>
</div>
{/* <div className="h-full col-span-6">
<img className="w-full h-full m-2" src={carousel1} />
</div> */}
<div
id="carouselExampleCrossfade"
className="absolute carousel slide carousel-fade carousel-dark relative col-span-6 m-2"
data-bs-ride="carousel"
>
<div className="carousel-inner relative w-full h-full overflow-hidden">
<div className="carousel-item active float-left w-full bg-no-repeat bg-cover">
<img
src="https://www.shell.com/business-customers/construction-and-road/about-construction-and-road/_jcr_content/pagePromo/image.img.960.jpeg/1652883928742/two-engineers-working-on-a-construction-site.jpeg"
className="block w-full h-full rounded"
alt="Wild Landscape"
/>
<Link
href={`/service`}
className="absolute bottom-0 left-0 m-6 py-2.5 px-2.5 bg-red-600 text-white font-medium text-md leading-tight rounded hover:text-red-700 hover:bg-gray-100 focus:bg-none focus:outline-none focus:ring-0 active:bg-gray-200 transition duration-150 ease-in-out"
>
<span>{"Testing"}</span>
</Link>
</div>
</div>
</div>
</div>
</section>;
Link to code here
Current view on mobile:
Current view on web:
When I open my nav bar(for mobile version) on my first page it works fine and overlaps the contents (picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057465795874906/unknown.png
And when I open my navbar on the second page(forms page) the forms overlap the navbar.(picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057531591929876/unknown.png
How could I fix that?
My code for my navbar is:
import React, {useState} from 'react';
import {GiHamburgerMenu} from 'react-icons/gi';
import {AiOutlineClose} from 'react-icons/ai';
import {NavLink} from 'react-router-dom';
const NavBar = () => {
const [isOpen, setIsOpen] = useState(true);
const toggle = () => {
setIsOpen(!isOpen);
}
return (
<div className='flex sticky justify-between items-center h-20 max-w-full mx-auto px-4 text-white top-0'>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9'/>
<ul className='hidden md:flex'>
<NavLink to="/" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Home</li></NavLink>
<NavLink to="/details" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>About</li></NavLink>
<NavLink to="https://www.google.com" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[35px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Host</li></NavLink>
<NavLink to="/info" activeClassName="active"><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[55px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600'>Tutorial</li></NavLink>
</ul>
<div onClick={toggle} className='block md:hidden'>
{!isOpen ? <AiOutlineClose size={20}/> : <GiHamburgerMenu size={20}/>}
</div>
<div className={!isOpen ? 'fixed left-0 top-1 w-[60%] h-full border-r border-r-gray-800 bg-gray-900 ease-in-out duration-500' : 'fixed left-[-100%] ease-in-out duration-500'}>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9 left-0'/>
<ul className='uppercase p-4'>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Home</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>About</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Host</li>
<li className='p-4 hover:border-b hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Tutorial</li>
</ul>
</div>
</div>
)
}
export default NavBar;
First page:
import React from 'react'
import Typed from 'react-typed';
import { Link } from 'react-router-dom';
export const Welcome = () => {
return (
<div className="text-white">
<div
id="index"
className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<div className="flex justify-center items-center">
<h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6">
Web
</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-indigo-600"
strings={["site", "Adam"]}
typeSpeed={70}
backSpeed={100}
loop
/>
</div>
<p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 ">
A website that is focused on <a className="underline text-indigo-600">design</a> and
<a className="underline text-indigo-600"> simplicity</a>
</p>
<Link to="/details"><button className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-white hover:ring-indigo-600 hover:bg-indigo-600 hover:shadow-xl hover:shadow-indigo-700 hover:text-white hover:scale-110">
Create
</button></Link>
</div>
</div>
)
}
Forms Page:
Code from: https://tailwindui.com/components/application-ui/forms/sign-in-forms (First Form). So how could i make my navbar overlap my forms page?
Increase the z-index of the nav bar so that it is higher than that of the form.
You'll have to work with relative absolute and z-index tailwind classes to overlap the navbar on the contents of the page.
Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Output in large device:
Output in smaller device:
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Further more you can use this tailwind play link
Extra. Toggle mobile navbar using hamburger menu
Output on large devices
Output in small device with hamburger menu
When clicked on hamburger menu
Code:
<body>
<div class="bg-yellow-400 h-screen relative z-0 flex">
<div class="hidden md:block bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl pl-24 md:p-0 main_content">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
<div
class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
</div>
</div>
<script type="text/javascript">
document
.querySelector(".hamburger_menu")
.addEventListener("click", () => {
console.log("Hello");
document.querySelector(".mobile_navbar").classList.toggle("hidden");
});
document.querySelector(".main_content").addEventListener("click", () => {
console.log("Touch me");
console.log(
document
.querySelector(".mobile_navbar")
.classList.contains("hidden") == false &&
document.querySelector(".mobile_navbar").classList.toggle("hidden")
);
});
</script>
</body>
The card is not going under the navbar, however, the navbar is fixed.
Code for card:
<div class="w-full flex justify-center no-wrap">
<div class="bg-white p-8 rounded-lg shadow-lg relative hover:shadow-2xl transition duration-500">
<h1 class="text-sm text-gray-400 font-semibold mb-1"><%= #question.question_asked_on %>.</h1>
<h1 class="text-2xl text-gray-800 font-semibold mb-3"><%= #question.title %>.</h1>
<div class="w-full">
<p class="text-gray-600 leading-6 tracking-normal">
<%= #question.body %>
</p>
</div>
<button class="py-2 px-4 mt-8 bg-indigo-600 text-white rounded-md shadow-xl">Learn More</button>
</div>
</div>
</div>
Code for navbar
<nav class="bg-indigo-700 fixed inset-x-0">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
if you remove relative from the card it should go under the navbar.