Floating Ads

CMS
,
1
:information_source: Summary Floating Image
:hammer_and_wrench: Repository Install with your own components

Demo Images

image
image1915×971 136 KB

image
image1920×885 111 KB

Will reappear every time you refresh

Tutorial

image
image635×343 15.8 KB

image
image1058×729 29.6 KB

image
image1066×761 40.4 KB

1. CSS

Summary 
/* CSS code */
.floating-image {
  position: fixed; /* Fix the floating image to the page */
  top: 50%; /* Set the distance from the top of the page to the floating image to half the page height */
  transform: translateY(-50%); /* Use the transform property to vertically center the image */
}

.left {
  left: 0;
}

.right {
  right: 0;
}


.close-label {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 5px;
  cursor: pointer;
}

#left-close-checkbox:checked ~ .left .close-label {
  display: none; /* Hide the corresponding left close button when the left close checkbox is checked */
}

#right-close-checkbox:checked ~ .right .close-label {
  display: none; /* Hide the corresponding right close button when the right close checkbox is checked */
}

.close-checkbox:checked ~ a img {
  display: none; /* Hide the corresponding floating image when the close checkbox is checked */
}
.close-checkbox {
  display: none; /* Hide the close checkboxes */
}

2. Body

Summary 
<!-- HTML code -->
<div class="floating-image left">
  <!-- Left floating image container -->
  <input type="checkbox" id="left-close-checkbox" class="close-checkbox"> <!-- Left close button checkbox -->
  <label for="left-close-checkbox" class="close-label">Hide</label> <!-- Left close button label -->
  <a href="https://www.justnainai.com/t/topic/3970" target="_blank">
    <!-- Left floating image link -->
    <img src="https://www.justnainai.com/uploads/default/original/2X/5/5adb9374eced1e03022705402399f5bd1f2c6143.png" alt="Left Floating Image">
    <!-- Left floating image -->
  </a>
</div>

<div class="floating-image right">
  <!-- Right floating image container -->
  <input type="checkbox" id="right-close-checkbox" class="close-checkbox"> <!-- Right close button checkbox -->
  <label for="right-close-checkbox" class="close-label">Hide</label> <!-- Right close button label -->
  <a href="https://www.justnainai.com/t/topic/3970" target="_blank">
    <!-- Right floating image link -->
    <img src="https://www.justnainai.com/uploads/default/original/2X/5/5adb9374eced1e03022705402399f5bd1f2c6143.png" alt="Right Floating Image">
    <!-- Right floating image -->
  </a>
</div>
3

Your website looks really great! I would like to ask how you implemented the jump to top and jump to bottom navigation on the timeline. Are there any components available for this? Thank you!

4

That is the component

GitHub - ScottMastro/discourse-scroll-buttons