MadihaSyed Posted March 18, 2022 Posted March 18, 2022 Site URL: https://www.thelibertyproject.org/ Hey, all. I have used this code ( a mix of html, css and javascript) to design a vertical animated timeline with the help of a youtube video ( For some reason, however, instead of appearing on both the left and right side, my text only appears on the left, even though it is fading in from opposite directions as denoted by the nth child selector. Attaching my CSS here for reference: //Section 3// .top-section{ text-align: center; max-width: 800px; margin: 0 auto; } .timeline{ position:relative; min-height: 150px; } .line{ position: absolute; z-index:2; left: calc(50% - 1px); width: 2px; top: -50px; bottom: -50px; background-color: #000; display: none; } .line:before, .line:after{ position: absolute; display: block; content: ''; height: 1rem; width: 1rem; border-radius: 50%; background-color: #000; left: 50%; transform: translateX(-50%); } .line:after{ bottom:0; } .section{ display: flex; opacity: 0; transform: translateX(-100%); transition: 500ms ease; position: relative; z-index: 1; margin: 20px 0; padding-left: 9rem; border-radius: 1 rem; align-items: right; min-height: 250px; } .section:nth-child(odd) { flex-direction: row-reverse; transform: translateX(100%); } .bead{ position:absolute; display: block; height: 1rem; border-radius: 50%; background-color: #000; left: 50%; top: 20%; transform: translateX(-50%); } .content{ width: calc(50% - 2rem); } .show-me:nth-child(n) { transform: none; opacity: 1; } Please help me figure this out! Thanks in advance. If possible, also please do let me know which codes to change to alter the color of the main line and circles! ❤️
MadihaSyed Posted March 19, 2022 Author Posted March 19, 2022 I seem to have fixed the placement issue by adding padding-right to the .section:nth-child(odd) class selector. Is this the correct way to go about this? Thanks!
Aled91 Posted March 20, 2022 Posted March 20, 2022 (edited) Hi @MadihaSyed, Great job. It looks great on your website. I think that for changing colors of the line you should try inside the ".line" the background-color. While for circles you should change the same background-color inside the ".beads". I would like to use the same timeline for my work experience but I am struggling with the js and nothing is showing up. I created the HTML in a code block and the CSS inside the custom CSS. How did you manage to make it work? Thanks, Alessandro Edited March 20, 2022 by Aled91 updated
MadihaSyed Posted March 20, 2022 Author Posted March 20, 2022 Hey, there! Thanks, and yeah a lot of trial and error is bringing about some results xD So for the .js, I downloaded the script from the youtube video's description, then opened the editor in Squarespace, typed some random text and linked that text to the .js file (by selecting it, clicking on the link icon which opened up the link editor, and uploading the .js file under the "file" tab). Then, I simply copied the js code location and added it in the html block like so: Quote <script src="/s/timeline.js"></script> Hope this helps! Aled91 1
Aled91 Posted March 21, 2022 Posted March 21, 2022 Thanks a lot, now the js runs but still cannot figure out the layout since, as you said, blocks are all aligning on the left and it seems that on mobile version titles are overlapping the line. For the first issue I have added the padding-right as you suggested but the code seems working on codepen but not here on squarespace. For the second issue no idea how to fix it 😞 Would you mind having a look at it just to suggest me what is wrong? Thanks a lot! The website is this: https://clover-triceratops-sx8c.squarespace.com/experience and the pwd: 1234 This is the code: <body> <div class="container"> <div class="top-section"> <h1> Work Experience</h1> <p> Prova paragrafo seconda riga </p> </div> <div class="timeline"> <div class="line"></div> <div class="section"> <div class="bead"></div> <div class="content"> <h2> Ecommerce Manager</h2> <p> Prova paragrafo </p> </div> </div> <div class="section"> <div class="bead"></div> <div class="content"> <h2> Marketplace Consultant</h2> <p> Prova paragrafo </p> </div> </div> <div class="section"> <div class="bead"></div> <div class="content"> <h2> Account Manager</h2> <p> Prova paragrafo </p> </div> </div> <div class="section"> <div class="bead"></div> <div class="content"> <h2> Vendor Manager</h2> <p> Prova paragrafo </p> </div> </div> </div> <script src="/s/timeline.js"> </script> </body> <style> body{ margin: 0; padding: 0; line-height: 1.5; font-weight: 400; color: white; background-color: #fff2cc; background_image: linear-gradient (315deg, #4c4177 0%, #2a5470 74%); } .container{ padding: 2rem; padding-bottom: 400px; margin: 0 auto; max-width: 1200px; } .top-section{ text-align:center; padding:4rem 0; max-width:600px; margin: 0 auto; } .timeline{ position:relative; min-height: 150px; } .line{ position:absolute; z-index:2; left: calc(50% - 1px); width: 2px; top: -50px; bottom:-50px; background-color: #000; display:none; } .line:before, .line:after{ position:absolute; display:block; content: ''; height: 1rem; width: 1rem; border-radius: 50%; background-color:#000; left: 50%; transform: translateX(-50%); } .line:after{ bottom:0; } .section{ display:flex; opacity:0; transform: translatex(-100%); transition: 600ms ease; position: relative; z-index: 1; margin: 50px 0; padding: 1rem; border-radius: 1rem; align-items: center; min-height: 300px; } .section:nth-child(odd){ padding-right: 1rem; flex-direction: row-reverse; transform: translateX(100%); } .bead{ position:absolute; display:block; height: 1rem; width: 1rem; border-radius: 50%; background-color: #000; left: 50%; top: 20%; transform: translateX(-50%); } .content{ width: calc(50% - 2rem); } .show-me:nth-child(n){ transform:none; opacity:1; } h1{ font-weight:400; letter-spacing: 1px; } </style>
MadihaSyed Posted March 21, 2022 Author Posted March 21, 2022 Ah, I haven't quite figured out the mobile bit yet, but as for all the content coming on the left, I added a padding-left to the odd class here: Quote .section:nth-child(odd){ padding-right: 1rem; padding-left: 18rem; flex-direction: row-reverse; transform: translateX(100%); } So the padding-left: 18rem is something youll have to adjust according to your own website. The beads in the center are something that I still havent figured out how to place so I just removed them. 🥲 Also I have noticed that you have the same problem that I have encountered, and that is the width of the entire webpage has a horizontal scroll now. Please let me know if you figure this bit out!
T33 Posted January 9, 2023 Posted January 9, 2023 Can this be done for a horizontal line? @MadihaSyed stellar work!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment